SWR사용하기

1. 타입 명시

type Lat = number;
type Lng = number;
export type Coordinates = [Lat, Lng];

export type Court = {
  nid: number;
  name: string;
  description: string;
  image: string[];
};

이제 코트 데이터를 랜딩 페이지에서 불러와준다.

코트 데이터는 예약 현황을 주기적으로 체크해줘야하므로 revalidate를 낮게 줘야한다. 하지만 우선은 1시간으로 지정해뒀다.

export async function getStaticProps() {
  const courts = (await import('../public/court.json')).default;

  return {
    props: { courts },
    revalidate: 60 * 60,
  }
}

courts를 prop으로 넘겨준다.

2. SWR 설치

리액트쿼리에 비해 fetch속도가 빠르고 가벼운 SWR을 사용해보았다.

 

3. useCourt라는 커스텀 훅을 만들어주었다. 훅은 hooks폴더에서 따로 생성

import { useCallback } from 'react';
import { Court } from '../types/court';
import { mutate } from 'swr';

export const COURT_KEY = '/courts';

const useCourts = () => {
    const initializeCourts = useCallback((courts: Court[]) => { // 새로운 코트데이터를 인자로 받아
        mutate(COURT_KEY, courts); // 전역상태로 저장, mutate는 SWR의 함수
    },[]);


    return {
        initializeCourts,
    };
};

export default useCourts;

이 커스텀 훅은 initializeCourts를 반환한다.

 

4. 다시 랜딩페이지로 돌아가 initializeCourts함수를 가져와 useEffect로 호출한다.

export default function Home({ courts }) {
  const { initializeCourts } = useCourts();

  useEffect(() => {
    initializeCourts(courts);
  },[initializeCourts, courts]);

.
.