✂️ 분배된 이슈

리액트 쿼리 (캐싱 적용)
apis 개선 (axios 타입, 인스턴스)
로딩 jotai suspense
eject 되돌리기

🚩 구현 목표

리액트 쿼리 적용
eject 되돌리기
로딩 jotai suspense로 변경
apis 모듈 개선

🍀 세부 목표

리액트 쿼리 학습 및 적용

🖥️ 구현 내용

리액트 쿼리 적용

왜 캐싱하려 하는가?

마커를 클릭하면 모달창이 표시된다. 모달창은 1단계, 2단계로 나뉜다. 2단계 모달창에서 해당 지역의 24시간 이내의 인구 밀도 정보를 그래프로 보여줘야 한다.
24시간 이내의 인구 밀도 정보는 2단계 모달창을 열 때마다 서버에 요청된다. 이 응답은 약 1.2~1.8초가 걸린다.
즉, 2단계 모달창을 열 때마다 1.2초~1.8초를 기다려야 한다.
24시간 이내의 인구 밀도 정보는 30분 간격으로 보여주기 때문에 실시간성이 크게 보장되지 않아도 된다.
그렇다면 한 번 요청한 데이터는 몇 분 정도 지나도 같은 데이터를 보여줘도 되지 않을까?
그래서 jotai를 이용해 한 번 응답 받은 데이터는 전역 상태로 저장하고, 이후 같은 지역에 대한 데이터를 보여줘야 할 때에는 전역 상태에서 가져오도록 했다.

왜 리액트 쿼리를 적용하려 하는가?

jotai를 이용해 전역 상태로 관리하면 캐싱 효과를 구현할 수 있었지만, 한 번 전역 상태로 저장된 데이터는 이후 변경되지 않는다.
즉, 사용자가 새로고침 하지 않으면 아무리 시간이 지나도 최초로 모달창을 열었던 그 시간을 기준으로 24시간 이내의 인구 밀도 정보를 보여준다.

ex) 오후 2시에 처음 모달창을 열고 새로고침을 하지 않은 상태에서 오후 9시에 모달창을 열게 되면, 오후 2시를 기준으로 24시간 이내의 인구 밀도 정보 가 표시된다.
좀 더 본격적인 캐싱 방법을 찾아보던 도중 리액트 쿼리로 캐싱을 구현할 수 있다는 것을 알게 되었고, 학습에도 도움이 될 것이라 생각하여 리액트 쿼리를 적용하기로 했다.

구현 방법

이전 코드

...

const [secondLevelInfoCache, setSecondLevelInfoCache] = useAtom(
  secondLevelInfoCacheAtom
);
const [graphInfo, setGraphInfo] = useState<SecondLevelTimeInfoCacheTypes>({});

...

// 전역에 areaName을 키로 갖고 있는 속성이 있으면 hit
if (secondLevelInfoCache[areaName]) {
  setGraphInfo(secondLevelInfoCache[areaName]);
  return;
}

// 아니면 api 호출
const { data } = await apis.getPastInformation(areaName);

// 전역 상태로 저장하고
setSecondLevelInfoCache({ ...secondLevelInfoCache, [areaName]: data });
// 그래프 보여주기
setGraphInfo(data);

리액트 쿼리 적용 후

// hooks/useGraphInfo.tsx
const useGraphInfo = (
  enabled: boolean,
  firstLevelInfo: SortAllAreasTypes | null,
  success: (data: graphInfoResponseTypes | null) => void
) => {
	const { data: graphInfoResponse } = useQuery(
	    ['getGraphInfo', firstLevelInfo ? firstLevelInfo[0] : ''],
	    async () => {
	      if (!firstLevelInfo) {
	        return null;
	      }
	      const result = await apis.getPastInformation(firstLevelInfo[0]);
	
	      return result;
	    },
	    {
	      enabled,
	      staleTime: QUERY_TIME.STALE_TIME, // 5분
	      cacheTime: QUERY_TIME.CACHE_TIME, // 30분
	      onSuccess: data => {
	        success(data);
	      },
	      onError: e => {
	        console.log('error', e);
	      }
	    }
	  );
	return [graphInfoResponse];
};

export default useGraphInfo;

서버에 데이터를 요청하는 로직을 분리하고 싶어, 커스텀 훅으로 생성

query key
- 지역에 따라 24시간 이내의 인구 밀도 정보 를 요청하므로 1번째 인덱스에 지역 이름을 붙여줌
  
  ex) [’getGraphInfo’, ‘서울역’]
query function
- 모달창을 열지 않았을 때는 null을 return하고 그 외에는 서버에 요청
query options
- enabled : 특정 상황에만 query function이 실행되도록 설정(후에 추가 설명)
- staleTime : 캐시 데이터가 언제 상하게(?) 되는지 결정, 5분으로 설정
- cacheTime : 캐시된 데이터가 30분 동안 메모리에 저장되는 것으로 설정
- onSuccess : 요청에 성공 시 데이터로 그래프를 그려줌

enabled
```
const enabled = () => {
	// 1.
  if (!isSecondLevel) {
    return false;
  }
	// 2.
  if (!firstLevelInfo || !prevFirstLevelInfo) {
    return true;
  }
	// 3.
  if (prevFirstLevelInfo[0] === firstLevelInfo[0]) {
    return false;
  }
	// 4.
  return true;
};
```
1. 2단계 모달창이 열리지 않았을 때는 요청하지 않음
2. 이전에 2단계 모달창이 한 번도 열리지 않았을 때, 즉 처음으로 2단계 모달창이 열릴 때는 요청
3. 이전에 선택됐던 지역과 같은 지역을 선택했을 때는 요청하지 않음
  
  ex) 서울역 마커를 누르고, 2단계 모달창을 닫고, 다시 서울역 마커를 눌렀을 때
4. 이전에 선택됐던 지역과 다른 지역을 선택했을 때는 요청
  
  ex) 서울역 마커를 누르고, 명동 마커를 눌렀을 때

그래프 적용

// components/InfoDetailModal/InfoDetailModal.tsx
const success = (data: graphInfoResponseTypes | null) => {
  if (data) {
    setGraphInfo(data.data);
    setPrevFirstLevelInfo(firstLevelInfo);
  }
};

const setPastInformation = async (): Promise<undefined> => {
  if (!firstLevelInfo) {
    return;
  }

  if (graphInfoResponse) {
    setGraphInfo(graphInfoResponse.data);
    setPrevFirstLevelInfo(firstLevelInfo);
  }

  // eslint-disable-next-line no-useless-return
  return;
};

useEffect(() => {
  if (!isSecondLevel) {
    ...
  }

  setPastInformation();
}, [isSecondLevel]);

요청을 성공했을 땐 success 함수가 실행되고, 이미 캐싱된 데이터를 가져올 땐 setPastInformation 함수가 실행된다!

그래프 캐싱 결과

캐싱 전

Day21 - 캐싱 전

캐싱 후

Day21 - 캐싱 후

서울역을 다시 열었을 때 그래프 그려지는 속도가 매우 빨라짐

Day21 - 캐싱 후4

한 번 요청한 데이터(서울역)는 다시 요청되지 않음

🚧 Trouble Shooting

조건문과 react-query

문제점

firstLevelInfo 는 null일 수도 있음
useQuery를 이용하려면 axios 주소에 firstLevelInfo[0] (지역 이름)를 사용해야 함

하지만 조건문으로 firstLevelInfo 가 있을 때만 useQuery를 사용하는 코드를 작성하였더니, 다음과 같은 에러 발생

Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

해결

const { data: graphInfoResponse } = useQuery(
    ...,
    async () => {
      if (!firstLevelInfo) {
        return null;
      }
      const result = await apis.getPastInformation(firstLevelInfo[0]);

      return result;
    },
    {
      ...
    }
  );

query Function에서 firstLevelInfo 가 있을 때만 요청하도록 변경
query Funciton에 대해 잘 이해하지 못하고 접근한 것이 원인

refactor client cache - boostcampwm-2022/web33-Mildo GitHub Wiki

✂️ 분배된 이슈

🚩 구현 목표

🍀 세부 목표

🖥️ 구현 내용

리액트 쿼리 적용

왜 캐싱하려 하는가?

왜 리액트 쿼리를 적용하려 하는가?

구현 방법

그래프 캐싱 결과

캐싱 전

캐싱 후

🚧 Trouble Shooting

조건문과 react-query

⚠️ GitHub.com Fallback ⚠️

refactor client cache - boostcampwm-2022/web33-Mildo GitHub Wiki

✂️ 분배된 이슈

🚩 구현 목표

🍀 세부 목표

🖥️ 구현 내용

리액트 쿼리 적용

왜 캐싱하려 하는가?

왜 리액트 쿼리를 적용하려 하는가?

구현 방법

그래프 캐싱 결과

캐싱 전

캐싱 후

🚧 Trouble Shooting

조건문과 react-query

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️