[프리온보딩] 220519 그룹과제 #2

그룹과제 #2

공식적인 내생각

밤에 잠이 쏟아져서 작성하다 말고 그냥 자버렸다...

리액트 쿼리를 사용하면서 같은 단어를 검색하면 캐싱이 되도록 분명 설정을 해놨었는데 이상하게 이전에 검색했던 단어를 또 입력했음에도 불구하고 데이터를 다시 불러오는 현상이 있었다

refetch() 이 함수때문이었다 ㅡㅡ 쓰지말자

작업 내용

리액트 쿼리 훅으로 만들기

export const useFilteredQuery = () => {
  const searchText = useAppSelector(getSearchText);
  const { data, refetch } = useQuery(
    ["#diseaseData", searchText],
    () => getDiseaseDataFiltered(searchText),
    {
      refetchOnWindowFocus: false,
      suspense: true,
      useErrorBoundary: true,
      staleTime: 60000,
      cacheTime: Infinity,
      enabled: searchText !== "",
      onSuccess: () => {
        console.log("fetched");
      },
    }
  );

  return { data, refetch, fuzzyRegExpString };
};

useQuery 훅을 또 다른 훅 안에 넣어서 더 간단하게 만들 수 있다

useQuery 특성상 설정값들 넣다보면 점점 길어져서 그냥 훅으로 만들어 분리하는 것이 훨씬 깔끔하더라… 저 옵션값들만 10줄가까이다 ;;

searchText는 다른 컴포넌트에서 set하므로, 리덕스를 통해 전역 상태로 분리해주었고 해당 전역 상태값을 불러오는 부분도 커스텀 훅 최상단에 넣어주었다

문자열이 비었을 때는 데이터를 불필요하게 받아오면 안 되므로 enabled 속성을 통해 제어해주자

리액트 쿼리 refetch 과정, 캐싱 안 되는 문제 해결

const { data } = useQuery(
    ["#diseaseData", searchText],
  () => getDiseaseDataFiltered(searchText),
    ...

useQuery도 일종의 훅 이므로, 다른 useState나 useEffect를 사용하는 커스텀 훅처럼 코드에 해당 훅 한 줄만 추가해도 의존성에 의한 재실행 등을 자동으로 수행해준다

useQuery는 첫 번째 인자로 키값과 의존성을 갖는 값을 넣을 수 있으며, 해당 값들이 변경되면 데이터를 새로 내려받아 다른 캐시로 저장한다

따라서 useQuery가 캐시를 구분하는 기준은 첫 번째 인자 배열에 들어있는 값이고, 해당 값들이 변경될 때마다 자동 refetch 하므로 굳이 아래에서 searchText를 의존성으로 갖는 useEffect를 또 사용할 필요가 없다

useEffect(() => {
    refetch();
}, [searchText]);

처음에 같은 검색 값임에도 불구하고 캐시를 불러오지 않고 데이터를 자꾸 다시 불러오는 문제가 있어 좀 해멨는데, 결과적으론 위의 코드를 커스텀 훅 안에 심었던 것이 문제였다

이 코드를 아예 제거하니 정상적으로 캐싱이 동작했다 ㅡ,,ㅡ;; 좀 허무하다…

Redux + toolkit 사용 후기

리코일이 가볍게 사용하기엔 좋긴 좋구나 라는 생각이 들었다 아무래도 사용할 state들만 간단하게 atom 형태로 정의해서 사용하면 되니까...

리덕스 쪽이 상대적으로 store라던가 reducer라던가 설정해야할 요소들이 있어서 번거로운 느낌?

단 평범한 setState 형태의 리듀서 뿐만 아니라 리듀서 함수를 직접 작성해서 특정 조건이나 알고리즘으로 값을 바꿀 수 있다는 점은 굉장한 강점으로 보인다

이러나저러나 공부하는 게 좋을 듯 하다

오늘 정리한 강의 내용

220515 코드 예시

220515 강의 - 코드 예시

[프리온보딩] 220515 강의 메모 02 (코드 예시)