무한 렌더링

문제 원인렌더링 데이터의 마지막 인덱스 위치에 IO(Intersection Observer) 관찰 요소를 표시하는 방식은 무한 렌더링 문제가 발생할 수 있다. 데이터가 1~2개 밖에 없어서 관찰 요소가 항상 화면에 들어온다면 ➊fetchNextPage 실행(React Query 훅이 반환하는 함수) → ➋기존 데이터 반환 → ➌렌더 → ➍IO 화면에 들어옴 → ➊fetchNextPage 실행 → 반복… 위 과정을 계속 반복하면서 무한 렌더링하는 문제가 발생한다. Query Key가 바뀌지 않아서 데이터 fetch 없이 캐싱한 데이터를 사용하지만 무한 렌더링 때문에 어플리케이션이 정상적으로 작동하지 않는다. 데이터가 아예 없다면 IO 관찰 대상 요소도 렌더링 하지 않으므로 문제가 없는것처럼 보이기 때문에 ..