SWR

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

SWR은 HTTP GET요청에 특화된 라이브러리 이다.

cache, refetch 등 강력한 기능을 사용할 수 있고 전역으로 사용할 수 있다는 장점을 가지고 있다.

SWR의 cache 기능을 이용하면 사용자 경험이 더 뛰어난 페이지네이션 기능을 구현할 수 있다.

cache

SWR의 캐시기능은 같은 key를 가진 api요청은 캐시데이터를 먼저 보여준 후 재검증을 한다.

// Page.jsx

function Page ({ index }) {
  const { data } = useSWR(`/api/data?page=${index}`, fetcher);

  // ... 로딩 및 에러 상태를 처리

  return data.map(item => <div key={item.id}>{item.name}</div>)
}

//App.jsx

function App () {
  const [pageIndex, setPageIndex] = useState(0);

  return <div>
    <Page index={pageIndex}/>
    <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
    <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
  </div>
}

위의 코드는 페이지가 이동될 때 마다 get요청을 보낸다. 데이터를 받아오는 동안 사용자는 아무것도 볼 수 없기 때문에 좋은 사용자경험을 줄 수 없다.

더 좋은 방법은 다음페이지의 데이터를 미리 캐시데이터에 저장시키는 것이다.
방법은 간단한데 위의 코드를 아래처럼 바꿔주면 된다.

//App.jsx

function App () {
  const [pageIndex, setPageIndex] = useState(0);

  return <div>
    <Page index={pageIndex}/>
    <div style={{ display: 'none' }}><Page index={pageIndex + 1}/></div>
    <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
    <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
  </div>
}

display: 'none'속성을 줘서 UI에 변함없이 다음페이지의 데이터를 미리 가지고 있을 수 있다.

결과

캐시되지 않은 데이터

캐시된 데이터