문제해결_ Recoil과 API 통신의 비효율성

 

위의 그래프를 구현 하려면 지역별 과거 미세먼지 수치 일평균의 값을 받아와서 로직(지역별 7일간의 평균과 순위)을 통해 값을 추출하여 넣어야하는데 리코일을 사용하려고 찾아보니 뭔가 이상하다.

리코일은 api통신관련 비효율적이라 리액트 쿼리 라이브러리로 api통신 데이터를 관리하는게 효율적이라는 조언을 들었다. 리코일만 신경쓰다가 너무 편향적으로 코드를 짜려고 노력한것이다.

그래도 셀렉터까지 공부할수 있었으니 좋은 기회였다고 생각하고

• 현재의 코드는 셀렉터에 api호출하는것을 넣어두고 컴포넌트에서 해당 셀렉터로 api통신해서 값을 가져오거나, atom에 저장해서 다른 컴포넌트에 전달해주는 역할을 했다
• 다시금 내용을 정리해서
  • 리액트쿼리로 api통신 관리 → api 캐싱, 업데이트 등 효율적임
  • 리코일 아톰을 사용하여 상태관리 → 컴포넌트, 전역 상태관리
  • 그리하여 리액트 쿼리로 api통신데이터를 가져오고 가져온 데이터를 바탕으로 리코일 atom에 저장하는 것으로 노선을 바꾸었다.그래프 구현은 이미 구현한 2개의 api통신과 리코일등을 수정해서 나만의 코드를 만들고 만드는 것으로 했다.
• 실시간 미세먼지 수치를 사용하는 SpotSuggestion 컴포넌트에서( 지역별 순위) 리액트쿼리 라이브러리를 사용해서 api를 요청하고 데이터를 아톰에 저장하는 것으로. 모든 api 통신은 리액트 쿼리 라이브러리로 바꿔주고 받아온 데이터는 예쁘게 아톰으로 저장해서 해당 아톰을 또 가공하여 쓰는것으로..
•  

//각 지역별로 useQueries를 사용하여 여러개의 API 요청
  useQueries(
    Object.entries(locationAtoms).map(([msrstnName]) => ({
      queryKey: ['pastDustData', msrstnName],
      queryFn: () =>
        fetchPastDustData(
          getSixDaysBeforeDate(new Date()),
          getYesterdaysStringDate(new Date()),
          msrstnName
        ),
      onSuccess: data => {
        // 데이터 fetch 성공 시, Recoil Atom 업데이트
        if (data && data.length > 0) {
          const pastDustHistory = filterLocationInfo(data);
          console.log(pastDustHistory);
          // 각각의 recoil atom 업데이트
          switch (msrstnName) {
            case '고성(DMZ)':
              setGoseongPastState(pastDustHistory);
              break;
            case '양양읍':
              setYangyangPastState(pastDustHistory);
              break;
            case '평창읍':
              setPyeongchangPastState(pastDustHistory);
              break;
            case '주문진읍':
              setGangneungPastState(pastDustHistory);
              break;
            case '금호동':
              setSokchoPastState(pastDustHistory);
              break;
            default:
              break;
          }
        }
      },
    }))
  );