[Next.js] 상태 관리 라이브러리 SWR이란?

SWR은 React 프레임워크인 Next.js를 만든 팀이 만들었다.

https://swr.vercel.app/ko

데이터 가져오기를 위한 React Hooks – SWR

react query에 비해 진입 장벽이 낮고, fetch 속도가 빠르며 코드가 경량화 돼 있는 특징이 있다.

 

useSWR

SWR은 useSWR이라는 훅을 사용하여 데이터를 조작한다.

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)

파라미터

• key : 요청을 위한 고유한 값
• fetcher : 데이터를 조작하기 위한 함수를 반환하는 Promise
• options : SWR의 옵션 객체

결과값

• data : fetcher를 통해 가져온 데이터
• error : fetcher를 통해 얻은 에러
• isValidating : 요청이나 갱신 여부
• mutate : POST, PUT과 같이 데이터를 추가, 갱신 할 때 사용

Naver Map을 통한 예시

// MapSection.tsx
import useMap from '@/hooks/useMap';
import { NaverMap } from '@/types/map';
import Map from './Map';

const MapSection = () => {
  const { initializeMap } = useMap();
  const onLoadMap = (map: NaverMap) => {
    initializeMap(map);
  };

  return (
    <Map onLoad={onLoadMap} />
    // <Markers/>
  );
};

export default MapSection;

// ---------------------

// useMap.ts
import { mutate } from 'swr';
import { NaverMap } from './../types/map';
import { useCallback } from 'react';
import { Coordinates } from '../types/store';

export const INITIAL_CENTER: Coordinates = [37.5262411, 126.99289439];
export const INITIAL_ZOOM = 10;

export const MAP_KEY = '/map';

const useMap = () => {
  const initializeMap = useCallback((map: NaverMap) => {
    mutate(MAP_KEY, map);
  }, []);

  return {
    initializeMap,
  };
};

export default useMap;

 

1. 네이버 맵이 onLoad가 될 때 onLoadMap 함수를 실행시킴으로써 구분선 아래에 있는 initializeMap 함수를 실행 시킨다.
2. initializeMap 함수를 통해 map객체를 SWR의 mutate함수를 사용하여 MAP_KEY 변수에 저장 된 엔드포인트에 저장한다.
3. 이후 전역으로 저장 된 데이터가 필요한 컴포넌트 내에서 const{data:map}=useSWR<NaverMap>(MAP_KEY) 와 같은 방식으로 가져와 사용 할 수 있다.