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

bigtae1007 commented 2 years ago

문제 상황 및 원인

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 commented 2 years ago

해결 방법 2 (실패)

useRef 사용

 const searchInput = useRef("");

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

선택 이유 .

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

실패 이유.

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

bigtae1007 commented 2 years ago

시도하고 실패한 방법

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 commented 2 years ago

사용하지 않은 이유

기획 변경

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

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

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

해당 pr #38

이후 생각나는 또 다른 방법

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

HH99-StockHub / FrontEnd