React Query로 서버로부터 가져온 데이터를 관리하였다.

데이터가 없는 경우엔 loading을 보이게 하였고 에러 발생 시 error alert가 나오게 하였다.

인피니트 스크롤을 추가함으로 한 번에 20개씩 영화 데이터가 보이게 하였다.

회고 : react-query를 사용할 때 어떻게 단축하면 좋을지 제대로 파악을 못한 부분을 이번 기회에 알게 됐다. 추가로 팀원분들의 CSS 및 코드 단순화를 직접 따라해봄을 통해 새로운 방식을 경험할 수 있었다.

7팀이 선택한 캐싱을 위한 라이브러리는 react-query였습니다. 마침 react-query에서 인피니트 쿼리를 지원하는 것을 발견했고, 해당 함수를 활용해 구현했습니다. 공식 홈페이지에서도 해당 쿼리가 load more와 infinite scroll에 유용한 서포트를 해 준다고 소개하고 있습니다.

구현 방식은 useEffect에 scroll event를 등록 해 놓고, scroll의 위치를 탐지해서, 어느정도 내려왔다 판단되면 useInfinitequery의 반환인 fetchNextPage를 호출합니다. useInfiniteQuery는 getNextPageParam을 호출하는데 여기서 인수로 넘어가는 lastPage와 allPages로 최대 몇 페이지까지 보여줄 수 있는지와, 다음 페이지를 구할 수 있었습니다.

회고 : 마침 수업 때 useEffect() 이슈 중 하나인 의존성에 관해서 다뤄주셨었는데 이번에 저도 인피니트 스크롤을 구현하며 이슈가 발생했습니다. 최초에만 실행되도록 의존성을 주지 않아도 될 것이라 생각했었는데 의존성이 필요한 코드를 작성했습니다. 수업 직후 바로 이런 코드를 짰다고 생각하니 많이 아쉬우면서도 이건 의존성이 필요한거 같은데..? 라는 생각도 드네요. 이번 기회에 제공해주신 useEffect관련 글 정독하겠습니다.