Library] SWR : 응용_Pagination & InfiniteScroll(useSWRInfinite)

일반적인 pagenation은 간단히 설명하고, useSWRInfinite에 대해 소개하고자 합니다.

https://swr.vercel.app/ko/docs/pagination

Pagination

기본 pagination은 useSWRInfinite를 필요로 하지 않습니다.

 

function Page ({ index }) {
  const { data } = useSWR(`/api/data?page=${index}`, fetcher);
 
  // ... 로딩 및 에러 상태를 처리
 
  return data.map(item => <div key={item.id}>{item.name}</div>)
}
 
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>
}

 

간단하게 useSWR을 통해 데이터를 받아와 반복문을 돌려 div태그를 새로 추가하게 됩니다.

api 주소만 맞추면, 큰 무리 없이 언제 어디서든 작성할 수 있을 법한 코드입니다. 

 

display : 'none'을 추가해서 SWR의 캐시 데이터를 활용하여 프리로드 할 수 있다는 장점이 있다고 공홈에서 소개해주는데,

미리 그려놓고 바꿔주면 속도 측면에서 좋아 보입니다.

 

 

---

 

 

Infinite Scroll

이 글의 목적은 해당 기능을 설명하고 싶어서였습니다.

무한 스크롤로 스크롤이 끝없이 내려가는 기능을 말합니다.

import useSWRInfinite from 'swr/infinite'
 
const { data, error, isLoading, isValidating, mutate, size, setSize } = useSWRInfinite(
  getKey, fetcher?, options?
)

 

parameter

• getKey : index와 이전 페이지 데이터를 받고 페이지의 키를 반환하는 함수
• fetcher : useSWR과 동일
• option : useSWR과 동일하며, 몇 가지 추가됐습니다. 공홈에서 확인하시면 됩니다.

 

 

---

 

 

return

• data : fetcher에서 성공적으로 통신을 했을 때 리턴되는 값
• size : 가져올 페이지 및 반환될 페이지 수 (state값)
• setSize : 가져와야 하는 페이지의 수
• error, isLoading, isValidating, mutate는 useSWR과 동일

 

 

---

 

 

예

const getKey = (pageIndex, previousPageData) => {
  if (previousPageData && !previousPageData.length) return null
  return `/users?page=${pageIndex}&limit=10`                   
}
 
function App () {
  const { data, size, setSize } = useSWRInfinite(getKey, fetcher)
  if (!data) return 'loading'
 
  return <div>
    <p>users listed</p>
    {data.map((users, index) => {
      return users.map(user => <div key={user.id}>{user.name}</div>)
    })}
    <button onClick={() => setSize(size + 1)}>Load More</button>
  </div>
}

 

getKey 함수를 만들어서 useSWR처럼 key를 넣어주면 됩니다. 끝에 도달했으면 null로 넣어주면 됩니다.

useSWR이랑 사용하는 데는 큰 차이가 없어 보입니다.

 

동작 원리를 설명 드리자면,

1. getKey가 실행되어 첫 페이지 pageIndex 값이 0으로 return하게 됩니다.
2. return 된 key값으로 fetcher가 실행되어 리턴값이 data에 저장됩니다.
3. Load More버튼을 클릭하여 다음 페이지의 데이터를 호출했다고 가정해봅시다.
4. setSize를 통해 size값이 +1됐습니다.
5. size는 state값이기 때문에 화면이 리렌더링 되고, useSWRInfinite가 실행됩니다.
6. 그러면서 getKey함수가 다시 실행이되고, size는 pageIndex의 인자값으로 들어가게됩니다.
7. 두 번째 페이지의 리턴값들이 data에 누적되어 쌓이게 되고, 화면이 그려지게 됩니다.

 

 

---

 

 

Global Mutate

import { useSWRConfig } from "swr"
import { unstable_serialize } from "swr/infinite"
 
function App() {
    const { mutate } = useSWRConfig()
    mutate(unstable_serialize(getKey))
}

 

binding mutate는 useSWR과 동일하게 사용하면 되고, global만 방식이 조금 달라 추가하였습니다.

 

 

---

 

 

SWR은 이 정도면 필요한 것들은 설명한 거 같습니다.
추가로 사용하거나 필요해 보이는 것들은 추가될 수도 있을 듯싶긴 합니다.

SWR이랑 React-Query랑 제일 많이 비교되는데, 
React-Query를 사용해보지는 않았지만, 사용법이나 개념은 비슷해 보입니다.
SWR보다는 React-Query가 다운로드수가 많기 하는 한데, 다운로드 수가 비슷해진 거 봐서는 둘 중에 하나만 잘 써도 
문제없이 개발할 수 있을 것으로 보입니다.