무한 스크롤 구현

react로 작성중인 프로젝트중 스크롤이 화면 끝에 도달했을때, 추가적으로 데이터를 더 로딩하는 무한 스크롤 방식을 구현해야 해서 구현해 보았다.

 

대상 데이터는 페이징 처리 돼서 반환이 되는 데이터이고, 이를 처리하기위해 useState를 이용해 변수를 선언했다.

현재 페이지가 몇 번째 페이지인지 알기 위해 page를 선언하고, 페이지가 끝에 도달했는지 알기 위한 용도로 totalPage를 선언해 주었다.

 

aysnc와 await를 사용해 비동기 처리를 해주고, useEffect를 통해 page의 상태가 변경될때마다 fetchProducts를 통해 페이지 데이터를 요청하도록 했다. 

 

 

그리고 이벤트 리스너를 통해 스크롤 위치를 체크할수 있게 하고, 이를 useEffect의 의존성을 [page,totalPage]로 설정함으로써, 페이지가 마운트 될때 작동하게 만들었다.(page,totalPage는 페이지가 마운트될때 0으로 초기화되거나 useEffect -> fetchProducts를 통해 변경이 된다)

또한, 스크롤 위치를 감지하여 스크롤 위치가 페이지의 끝에 도달하면 loadMoreData를 작동시키게 했다.

loadMoreData함수는 현재 페이지가 마지막 페이지인지 확인한 후 마지막 페이지가 아니면 페이지를 +1만큼 set한다. 그럼 page에 변동이 있으므로 page를 의존성으로 가지고있는 useEffect훅이 작동하게 되고, fetchProducts함수를 작동시켜 서버에서 새로운 데이터를 받아와 추가적인 데이터를 업데이트 할 수 있다.

 

결국 페이지 로딩시

fetchProducts함수 작동, 이벤트 리스너작동(첫 데이터 로딩) -> 스크롤 해 페이지 끝에 도달시 이벤트 리스너가 감지하여  loadMoreData함수 작동(page변수 +1만큼 변경) -> 변경된 page를 의존성으로 가지고있는 useEffect훅 작동하여 fetchProducts함수 작동(추가적인 데이터 로딩)

순으로 작동하여 페이지 끝에 도달시 추가적인 데이터를 로딩하게 된다.