치춘짱베리굿나이스
[프리온보딩] 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 코드 예시
'프로젝트 > 원티드 프리온보딩' 카테고리의 다른 글
[프리온보딩] 220521 그룹과제 #2 (0) | 2022.05.22 |
---|---|
[프리온보딩] 220520 그룹과제 #2 (0) | 2022.05.21 |
[프리온보딩] 220518 그룹과제 #2 (0) | 2022.05.19 |
[프리온보딩] 220517 그룹과제 #2 (2) | 2022.05.18 |
[프리온보딩] 220517 강의 메모 01 (코드리뷰) (0) | 2022.05.17 |