1. 현재상황 🤯

• 무한 스크롤 구현을 IntersectionObserver를 활용함
• react-query에서는 무한스크롤을 쉽게 구현할 수 있다고 하는데 rtk query는 안됨
• rtk query에서 get은 내가 원할때 실행시킬 수 있는것이 아니라 자동실행
• 공식문서를 보니 merge를 이용해서 캐싱시키고, 새로운 데이터를 옆에 붙여넣을 수 있다는 정보 획득
• forceRefetch 함수를통해 어느정도 내가 원하는 시점에 다시 데이터를 refetch할 수 있다는 정보 획득
• 구현
• 테스트
• 페이지이동하지않고 무한스크롤 테스트시 정상작동
• 무한스크롤하여 끝가지 내린후 다른페이지 이동후 다시 돌아왔을때 중복 렌더링 이슈 발생(영상에서 코트입은 사진 아래 컨텐츠까지가 원래 마지막 data임)
  
  주석은 안봐도됨
  

2. 해결노력💻

• 에러를 보니 같은 id가 렌더링 되었다고 알림
• 서버측에서 총 페이지 개수 계산후 client에 받아와서 마지막 페이지 렌더링시 더 이상 observe div는 숨김처리
• 위에 방법으로 해결되지않아 훅마다 마지막페이지시 함수실행을 종료하는 코드작성

3. 정답😁

• 중복렌더링을 하는것이 문제면 서버에서 어떻게 받아오든 클라이언트단에서 unique한 id를 통해서 중복 제거를 하면된다.
• 모든 데이터를 합친후
• 해당 데이터 배열을 filter로 순회하며
• 중복되지 않는 데이터만 findIndex로찾아서 새로운 배열을 만드는방식으로 해결했다