SWR은 로컬 상태 관리에도 사용 가능

소위 SWR

SWR은 React에 사용되는 데이터 추출 라이브러리입니다.
상세한 설명은 생략했지만 원격 데이터 획득을 위한 캐시 메커니즘을 제공하는 프로그램 라이브러리로 널리 알려져 있다.
본고는 이러한 SWR이 실제로 로컬 상태 관리에도 사용될 수 있음을 소개한다.
기사의 로컬은 원격(API 등)에서 얻은 데이터의 반의어로 클라이언트 측에서 완성된 상태를 가리킨다.구성 요소 내부에 폐쇄된 상태가 아니라는 것을 양해해 주십시오.

Context 상태 관리 사용

일반적으로 다음 Context API가 사용됩니다.

import {
  createContext,
  ReactNode,
  VFC,
  useState,
  Dispatch,
  SetStateAction,
  useContext,
} from 'react';

type ICountContext = {
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
};

const CountContext = createContext<ICountContext>({
  count: 0,
  setCount: () => {},
});

type Props = {
  children: ReactNode;
};

export const CountProvider: VFC<Props> = ({ children }) => {
  const [count, setCount] = useState<number>(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
};

export const useCountState = (): [
  ICountContext['count'],
  ICountContext['setCount']
] => {
  const { count, setCount } = useContext(CountContext);
  return [count, setCount];
};

import { AppProps } from 'next/app';
import { VFC } from 'react';
import { CountProvider } from '../context';

const MyApp: VFC<AppProps> = ({ Component, pageProps }) => {
  return (
    <CountProvider>
      <Component {...pageProps} />;
    </CountProvider>
  );
};

export default MyApp;

SWR 상태 관리 사용

같은 상태 관리를 SWR로 작성하면 다음과 같습니다.

export const useSWRCountState = (
  initialCount: number
): [number, (count: number) => void] => {
  const { data: count, mutate: setCount } = useSWR('count', null, {
    initialData: initialCount,
  });
  return [count as number, setCount];
};

fetcher 함수null를 mutate에 setState의 함수로 사용한다.
그런 다음 옵션initialData에 초기 값을 설정합니다.
SWR을 사용하면 글로벌 함수useState를 쉽게 만들 수 있습니다.
저는 개인적으로 Recoil와 비슷한 상태 관리를 좋아합니다.
참고로 usesWR의 매개 변수는 다음과 같은 네 가지로 나눌 수 있다.
인용하다

[cacheKey]
[cacheKey, fetcher]
[cacheKey, option]
[cacheKey, fetcher, option]

이 점을 보면fetcher 함수에서null을 교부하지 않아도 생략할 수 있을 것 같지만 SWR에서fetcher 함수를 생략하면 기본적으로 다음 함수를 설정합니다.https://github.com/vercel/swr/blob/11533ee8d5df6136726c4fc7a05bdbf1ac82fb35/src/libs/web-preset.ts#L22

const fetcher = (url: string) => fetch(url).then((res) => res.json());

때문에 null을 명확히 냈어요.
아까 SWR을 이용해서 간단한 샘플 코드를 써보세요.
css가 생략되었습니다.

const SampleCount = () => {
  const { data: count } = useSWR('count', null);
  return <div>{count || 0}</div>;
};

const IndexPage: VFC = () => {
  const [count, setCount] = useSWRCountState(0);

  return (
    <>
      <div>{count}</div>
      <div>
        <SampleCount />
      </div>
      <div>
        <Button onClick={() => setCount(count + 1)}>+1</Button>
      </div>
    </>
  );
};

export default IndexPage;

문제 없이 움직이고 있어요.

최후

따라서 SWR은 로컬 상태 관리 라이브러리로도 사용할 수 있습니다.
이 방법은 스스로 생각해낸 것이 아니라 SWR의 소스 코드를 읽고 아는 것이다.
https://github.com/vercel/swr/blob/11533ee8d5df6136726c4fc7a05bdbf1ac82fb35/src/resolve-args.ts#L35
https://paco.sh/blog/shared-hook-state-with-swr