16. Admin 리스트 페이지 구현

16-1. useSWR을 이용하여 API 연동

 

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

아래는 useSWR 공식 문서

https://swr.vercel.app/ko

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

 

 

설치 명령어 : npm install --save swr

 

 

 

 

캐시에 저장된 데이터가 실제 서버에서 변경이 생긴 경우, 사용자는 최신의 데이터를 사용할 수 없게 되는 문제가 생긴다.

이 문제를 해결하기 위해, 빠른 화면 출력을 위해 일단 캐시된 데이터를 사용하고, 서버에서 데이터를 새로 불러와서 데이터를 다시 갱신하는 방법이 있다.

이런식으로 데이터를 관리하는 로직을 구현한 것이 useSWR 라이브러리 이다.

핵심 포인트는 어떻게 하면 사용자에게 불편함이 없도록 서버 데이터를 효율적으로 불러오고 관리할 것인가 이다.

 

 

useSWR 라이브러리 사용 예시

fetcher.js

 

ListPage.js

 

아래 호출 로그를 보면, useSWR 라이브러리로 호출시, 캐시된 정보 없을 때 undefined 먼저 출력(렌더링)되고, 서버에서 데이터 받아온 다음에 데이터가 로깅 되는 것 확인 가능하다.

 

 

 

16-2. 설문 리스트 컴포넌트 구현