게시글 검색 버튼을 클릭했을 때 useQuery 실행하기

[bigtae1007]

문제 상황 및 원인

• useQuery는 조건문 함수 등에 선언 할 수 없다. useHook조건으로 최상위에 호출해야 한다.
• 이번에는 검색 결과에 대해 캐시 데이터 관리가 필요한 상황이라 판단하여 useQuery를 사용할 예정

해결 방법 1 (반 성공)

refetch , useState를 이용한 코드

const [input, setInput] = useState("")

// useQuery 옵션에 enabled:false 부여
 const { data, refetch } = useTotalPageQuery.useGetSearchArticles(
    input
  );

//onchage
const change = (e)=>{
setInput(e.target.value)
}
const submit = ()=>{
refetch()
}

실패 이유 .

useState로 상태관리를 하다 보니 직접 요청은 진행되지 않지만 캐시 데이터가 변경값마다 쌓이게 된다.
연결은 가능하지만, 좋은 모습은 아니기에 다른 방법을 선택해보고자 한다.

[bigtae1007]

해결 방법 2 (실패)

• useRef 사용

 const searchInput = useRef("");

  // 검색하기 useQuery
  const { data, refetch } = useTotalPageQuery.useGetSearchArticles(
    searchInput.current.value,
  );

선택 이유 .

useState는 변경 값마다. 리렌더링과 함께 useQuery가 호출되기 때문에 useRef를 이용해 한 번만 호출 할 수 있을 것 같다는 생각에 선택

실패 이유.

별다른 상태 관리 없이 searchInput.current.value, 값이 변경되지 않기 때문에 원하는 키워드 요청이 불가능하다.

[bigtae1007]

시도하고 실패한 방법

useMutation로 데이터를 불러오고 redux store에 저장하여 전역 상태관리를 한다. (MVP 이전에는 Redux 사용)

실패한 이유 (반 성공, 단 로직이 너무 많고 길어져서 사용안함)

• 전역 상태 관리 할 데이터도 아닌데 store에 저장하는게 맘에 들지 않았다.
• 규모가 커지고 어떤 사용자가 무작위 검색을 통해 store에 데이터가 쌓이게 되면, 특정 검색 단어의 데이터를 불러오는 시간이 늦어진다. (그렇게 느려지지는 않겠지만.... 이런 한계점이 보이는게 와닿지 않았다.)
• 데이터를 초기화 시키는데 너무 많은 코드를 사용 해야한다.

내가 시도한 redux에서 3번 방법 부연 설명

• 데이터를 불러 저장할 때 만료 시간도 같이 저장한다.
• 만료 시간이 지나지 않고 store에 데이터가 있다면 해당 데이터를 불러온다.
• 만료 시간이 지났거나 store에 데이터가 없다면 새로 mutate을 이용해서 데이터를 다시 불러온다.

useState와 useRef를 혼용하여 사용

생각하게 된 이유.

머릿속을 비우고 다시 고민을 시작했다. useRef를 사용할 때 따로 상태관리 없이는 키워드 값을 변경할 수 없었다는 문제에 상태관리만 추가하면 가능 할 것 같다는 생각이 들었고 바로 코드를 작성했다.

// input값을 가져올 데이터
const input = useRef("")
// 호출할 값 상태관리
const [inputState, setInputState] = useState("")

// useQuery 옵션에 enabled:false 부여
 const { data, refetch } = useTotalPageQuery.useGetSearchArticles(inputState);

// 검색하기
const submit = ()=>{
setInputState(input.current.value)
}

useEffect(()=>{
if(inputState !== ""){
refetch()
return ()=>{}
}
},[inputState])

위 코드처럼 state관리를 한 번 더 하는 것으로 원하는 상황에서 데이터를 호출 할 수 있었다.
다만 위 방법을 사용하지는 않았다.

[bigtae1007]

사용하지 않은 이유

기획 변경

초기 기획은 modal로 구현하는 것이었다. modal은 따로 url이 없기 때문에 컴포넌트 props로 response를 전달 할 계획으로 작성했다. 하지만 페이지로 기획을 변경했고, 그에 따라서 param으로 받아와 useQuery 사용이 가능했다.

작성할 코드가 많이 남았다.

물론 해결한 방법을 사용 할 수 있지만, 6주라는 제한된 기간 동안 빠르게 구현하기 위해서는 짧고 빠르게 작성 할 수 있는 방법을 선택하는 것이 옳았다.
만일 해결 방법이 더 효율적이라면 사용했겠지만, 그렇지 않기 때문에 사용하지 않았다.

해당 pr #38

---

이후 생각나는 또 다른 방법

modal로 구현하기 위해 props로 data를 넘겨줄 생각을 했다. 정리하면서 다시 한번 생각을 하는데, props로 keyword를 넘겨주는 것이 더 효율적인 코드 개선이었던 것 같다.
modal 컴포넌트를 따로 분리하여 렌더링 시 요청을 보내는 방식이 가장 베스트 코드인 것 같다.