useInfiniteQuery에 대하여

useInfiniteQuery(무한 스크롤)에 대한 글입니다.

무한 스크롤이란 무엇인가

사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험 방식입니다.

사용처

주로 pagination에서 사용됩니다. 사용자의 클릭을 최소화하면서 한 번에 많은 양의 데이터를 보여주고 싶을 때, 사용하기 때문입니다.

• 행위에 대해 표현하는 방식이라 생각하면 쉽습니다. 일정 수의 아이템을 불러오고 버튼을 누르면 데이터 세트을 불러옵니다. 이때, 데이터가 다 불러와지면 무한 스크롤은 멈춰야 합니다. 이처럼 무한 스크롤은 옵션에 대해 사용자가 바라는 개인화가 가능합니다.

사용법

1. useInfiniteQuery의 속성에 queryFunction과 queryParams를 삽입합니다.
2. queryFunction에는 무한스크롤 대상 API. 즉, 불러오고자 하는 데이터 세트를 입력합니다.
3. queryParams에는 정해진 데이터 row 수만큼 저장시킬 변수를 입력합니다.