5.useInfiniteQuery를 활용하여 비효율적인 API요청 개선

기존의 문제

로그인을 하면 자동으로 홈페이지로 이동하고 홈페이지에는 다양한 유저들이 게시한 게시물들을 보여줍니다.

기존에는 게시물들을 보여주기 위해 한번에 모든 게시물들을 받아와 보여주는 방식이였습니다.

그러나 유저가 로그인 후 홈페이지에 접속했을때 모든 게시물을 보지 않고 다른 동작을 할 수도 있기에

굳이 처음부터 모든 게시물 정보를 받아와 일부를 화면에 렌더시키는 것은 매우 비효율적인 방식이라고 생각했습니다.

또한 게시물 데이터의 양이 방대해지면 api요청을 하고 데이터를 불러오는데 오랜시간이 걸려 좋지 않은 사용자 경험을 제공할 수 있다고 생각했습니다.

개선 방법

그리하여 기본적으로 유저가 홈페이지에 접속했을때 처음부터 모든 게시물 정보를 받아 오는것이 아닌

useInfiniteQuery를 사용하여 일정 개수의 게시물 정보를 받아오도록 하였습니다.

서버에 게시물 정보 요청을 보낼때 일정 개수만큼 게시물을 클라이언트에 보내주기 위해 요청을 보낼때 쿼리스트링으로 한번에 보내줄 개수정보와 보내줄 게시물의 위치정보를 함께 전달하였습니다.

서버도 이에 맞추어 적절히 수정 작업을 거쳐 api요청이 오면 특정 개수의 게시물정보만 클리이언트로 전달하도록하였습니다.

그리고 게시물 제일 아래에는 스피너 컴포넌트를 놓고, Intersection Observer를 사용하여 스피너 컴포넌트가 화면에 나오면 다시 일정 개수 만큼 게시물 정보를 불러오고 더 이상 보여줄 게시물이 없으면 스피너 대신 “게시물 없음” 이라는 문구가 나타나도록 구현하였습니다.