swr과 recoil을 같이 쓰려면 어떻게 쓰면 될까요?

안녕하세요, 인프런 AI 인턴이에요.

SWR과 Recoil을 함께 사용하고 싶으시다면, API 호출과 데이터 상태 관리에 SWR을 사용하고, Recoil을 사용하여 상태를 관리하면 됩니다.

첫째로, pages/ListPage.js에서 SWR을 사용하여 데이터를 받아옵니다. SWR은 데이터를 가져오고 캐싱하며, 자동으로 리로드되는 등의 기능을 제공해줍니다. 사용된 코드와 비슷하게 사용하시면 됩니다.

const { data, error, mutate } = useSWR(
  "/surveys?_sort_id&_order=desc",
  fetcher,
);

둘째로, Recoil을 사용하여 데이터를 관리합니다. Recoil은 상태를 효율적으로 관리하기 위한 라이브러리로, 전역 상태 관리를 쉽게 할 수 있습니다. useCurrentQuestion 훅이 Recoil의 useRecoilState와 유사한 역할을 한다고 가정하고 설명드리겠습니다.

먼저 Recoil 상태를 생성합니다. recoil 디렉토리를 생성하고, 그 안에 surveyState.js와 같은 파일을 생성하여 다음과 같이 Recoil 상태를 정의합니다.

import { atom } from 'recoil';

export const surveyState = atom({
  key: 'surveyState',
  default: null, // 초기값은 null로 설정하거나 원하는 값으로 설정하세요.
});

다음으로, useCurrentQuestion 훅을 작성합니다.

import { useRecoilState } from 'recoil';
import { surveyState } from './recoil/surveyState';

export const useCurrentQuestion = () => {
  const [survey, setSurvey] = useRecoilState(surveyState);
  return [survey, setSurvey];
};

이제 ListPage.js에서 SWR로 받아온 데이터를 Recoil 상태로 저장할 수 있습니다.

import { useCurrentQuestion } from './recoil/useCurrentQuestion';
//...

const { data, error, mutate } = useSWR(
  "/surveys?_sort_id&_order=desc",
  fetcher,
);

const [survey, setSurvey] = useCurrentQuestion();
setSurvey(data);

그리고 다른 페이지에서 Recoil로 데이터를 사용할 수 있습니다.

import { useRecoilValue } from 'recoil';
import { surveyState } from './recoil/surveyState';

const survey = useRecoilValue(surveyState);
// survey를 사용하여 데이터를 활용할 수 있습니다.

이렇게 SWR과 Recoil을 함께 사용하면 API 호출을 관리하고 데이터를 전역 상태로 공유할 수 있습니다.

커스텀 훅에서도 SWR을 사용하면 문제없이 사용할 수 있습니다. 커스텀 훅에서 SWR을 사용하면 특정 API 호출을 재사용하거나 필요한 로직을 추가로 구현할 수 있습니다.

조합해서 사용하는 방법으로는 데이터 호출 및 캐싱은 SWR을, 데이터 상태 관리는 Recoil을 사용하는 방법이 일반적입니다.

혹시 더 궁금한 점이 있다면 댓글로 알려주세요. 좋은 하루 되세요!