💻[React Native] SWR

📌 SWR이란?

데이터에 대한 캐싱과 재검증을 하는 것
데이터 로드이후, cash를 가져 구동이후 메모리 상의 cash를 보여주는 기술
const fetcher = (...args) => fetch(...args).then(res => res.json()) :데이터를 가지고 오는 방식과 상관없이 모두 fetcher로 만들 수 있음

const fetcher = function (url, params) {
  fetch(params).then(res => res.data) //window fetch
  axios.get(url, (config = {params})).then(res => res.data); 
  //axios사용, response의 data return
};

✏️ SWR 사용

import useSWR from 'swr'

function Profile () {
  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)

  if (error) return <div>failed to load</div> //error가 나면 error 출력
  if (isLoading) return <div>loading...</div> //data가 없다면, 

  // 데이터 렌더링
  return <div>hello {data.name}!</div>
}

🔗 BoxOffice.js

const url =
    'https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json';
  const {data, error} = useFetch(
    url,
    (params = {
      key: 'bb4881b8d562d9187648f76284e6f14c',
      targetDt: '20220222',
    }),
  );

  if (error) return <Paragraph>{JSON.stringify(error)}</Paragraph>;
  if (!data) return <ActivityIndicator />;

  const ranks = data?.boxOfficeResult?.dailyBoxOfficeList || []
  return~

🔗 MovieDetail.js

 const url =
    'https://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json';
  const {data, error} = useFetch(
    url,
    (params = {
      key: 'bb4881b8d562d9187648f76284e6f14c',
      movieCd: route.params.movieCd,
    }),
  );

  if (error) return <Paragraph>{JSON.stringify(error)}</Paragraph>;
  if (!data) return <ActivityIndicator />;

  const detail = data.movieInfoResult.movieInfo;
return~

✏️ 프리패칭

사용자들이 많이 클릭할 것으로 보장되는 부분에게 프리패칭하여 데이터를 미리 부여
mutate fetch해서 가지고 오는 data를 이를 통해 다시 가져와서 사용하는 것
호출하는 시점에 데이터 프리패칭을 시작
웹: 마우스가 오버되는 순간, 자동검색: 예측 가능한 범위

🔗 BoxOffice.js

  useEffect(() => {
    if (!data) return;
    const ranks = data?.boxOfficeResult?.dailyBoxOfficeList || [];

    (async function () {
      for (const rank of ranks) {
        await prefetch( //await: 순차적으로 처리
'https://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json',
          {
            key: 'bb4881b8d562d9187648f76284e6f14c',
            movieCd: rank.movieCd,
          },
        );
      }
    })();
  }, [data]);

각 페이지의 rank들을 비동기처리로 순차적으로 for문을 이용해 프리패칭