- 인피니티 스크롤 구현 시, useEffect를 이용하여 화면의 스크롤에 이벤트 리스너를 할당하고, 현재 위치가 브라우저 맨 하단일 시에 추가 쿼리를 요청하는 fetchMore함수를 실행하도록 작성했다.
- 처음에 의존성 배열 자리에 빈 배열을 넣었었다.
- 그러고 나니 이상하게 불렀던 데이터만 반복적으로 쌓이는 현상이 발생했다..(?)
- 의존성 배열을 제거하니까, 정상적으로 다음 차례의 데이터를 요청했다.
- 이 둘의 차이는, 빈 배열이 있을 경우엔 처음 렌더링 될 때에만 useEffect 내 코드를 실행하게 된다.
- 빈 배열을 넣었을 경우와 아무 것도 넣지 않았을 경우, 이벤트 리스너는 정상적으로 동작하지만, 유일한 차이점은 빈 배열일 경우엔 새로운 데이터를 불러오지 못하고 기존의 데이터만 병합한다는 것이다.
- 즉, 리렌더링 될 때마다 useEffect를 실행해야지 새로운 데이터를 불러올 수 있다는 의미이다.
- 렌더링될 때마다 새로운 이벤트 리스너를 등록하지 않게 되면, fetchMore 함수를 실행하긴 하지만 추가적으로 데이터를 요청하지 못하고 기존의 데이터에 병합만 한다는 건데.. 원인이 구체적으로 무엇일까?
- 처음 렌더링 될 때 딱 한 번만, useEffect를 통하여 윈도우의 스크롤을 감지하는 이벤트 리스너가 등록된다. 이때 브라우저 맨 하단에 위치하면 fetchMore 함수실행은 정상적으로 되지만, 추가 쿼리를 요청하는 함수의 매개변수엔 data의 길이가 들어가는데 여기에 data가 undefined가 들어가는 것으로 보인다.
- 그렇게 되어 추가적으로 데이터를 보내지는 못하고, 기존에 불러왔던 데이터만 반복적으로 병합시켰기 때문에 발생한 것으로 확인된다.
- 즉, 렌더링 될 때마다 반복해서 이벤트 리스너를 재 등록해줘야 주기적으로 받아오는 data의 길이가 추가 쿼리 함수의 매개변수로 온전하게 들어가는 것이 가능하다는 것이다.
꾸준한 기록