useInfiniteQuery에 대하여...

<회고록>

오늘은 useInfiniteQuery에 대해서 살펴보려고 한다. 즉 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? 이라는 질문에 하나의 방법이 될 수 있는 useInfiniteQuery에 대해서 살펴보려고 한다.

 

1. 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? 

: 위 답을 내리기 위해서는 먼저 무한 스크롤에 대해서 살펴봐야한다. 무한 스크롤에 경우에는 사용자가 스크롤을 맨 밑하단으로 내렸을 때 데이터를 계속 fetching을 해오면서 무한정 스크롤을 내릴 수 있도록 해주는 기술이다. 이 기술에서 중요한 부분은 어떻게 DOM을 최적화 시킬 것인가?이다. 즉 사용자 입장에서 무한정 스크롤을 밑으로 내릴 때 어떻게 하면 끊낌없이 데이터를 보여줄 수 있는지이다. 이점에서 우리는 데이터를 짤라서 보여지는 부분만 fetching을 가져오고 스크롤을 맨 밑하단으로 내렸을 때 다시 데이터를 fetching 함으로써 유저의 만족도를 높일 수 있다.

 그리고 이런 방식을 손쉽게 할 수 있는 훅이 useInfiniteQuery 이다. useInfiniteQuery를 사용하면 앞서 설명한 코드를 작성하는데 있어서 보일러 플레이트가 줄어들고 화면에 보여지는 부분만 렌더링을 거치고 나머지 데이터들은 메모리에 저장함으로써 유저의 만족도를 높일 수 있다는 장점이 있다.