[영화 목록 조회 프로젝트] React-Query로 검색 기능 구현

🚀 React-Query로 검색 기능 구현

처음에 구현을 했을 때는 처음 검색은 되는데, 이후에 다른 검색어로는 검색 결과가 제대로 받아지지 않았었습니다. 그 해결방법으로 쿼리 키를 하나 더 사용하는 방법을 이용했습니다.

 

📜 Hooks/Queries/get-search.js 파일

const getSearch = async params => {
  const res = await MovieApi.getSearch(params)
  return res.data
}

const useGetSearch = params => {
  const { data, error, status, isLoading } = useQuery(
    [QUERY_KEY.GET_SEARCH, params.title],
    () => getSearch(params),
    { ...queryConfig },
  )
  return { data, error, status, isLoading }
}
export default useGetSearch

우선 해당 코드를 작성하기 전에 미리 해둔 작업은 다음과 같습니다.

 

• API 모듈화
• 쿼리 키를 Consts 폴더에 query-key.js에서 객체로 관리

 

React-Query는 쿼리 키를 가지고 임의로 inValid한 상태를 만들 수도 있습니다. 따라서 쿼리 훅은 쿼리 키 이름으로 상태가 관리된다는 생각이 들었는데요.

처음에는 [ QUERY_KEY.GET_SEARCH ] 만 작성하였더니, 검색어가 바뀔 때마다 쿼리 훅을 호출해도 쿼리 키가 같은 값이기 때문에 동일한 데이터를 가져왔다고 아는 것 같아 검색 결과 데이터를 불러오지 못했다고 생각이 듭니다.

 

그래서 쿼리 키를 2개를 주는 방법을 택했더니, 쿼리 훅 함수를 호출할 때마다 함수의 매개변수에 params의 title에는 매번 다른 검색어가 올 것이고, 만약 같은 검색어가 들어왔다면 동일한 데이터이므로 불필요한 데이터 조회 작업이 없을 것입니다.

 

📜 Pages/SearchResult/index.js 파일

function SearchResultPage() {
  const { title } = useParams()
  const { data, status, isLoading } = useGetSearch({ title })
  
  return (
    // ...
  )
}

쿼리 훅 함수를 사용하는 페이지에서도 title이 바뀔 때마다 렌더링되며 그 title을 가져와서 useGetSearch에게 넘겨주면 쿼리 키가 다를 시 데이터를 불러올 것입니다.