infinite scroll ?
ex) CRUD 게시판을 생각해보면 게시글이 있고 이 게시글을 보여주는 list page가 있을 것이다.
리스트가 적을 때는 상관 없지만 실서비스에서 수십수만개가 된다면 어떻게 될까 ?
한번에 수많은 데이터를 서버에서 들고와서 사용해야되기 때문에 페이지를 렌더링하는데 많은 시간이 걸릴 것이다.
이를 해결하는 방법 중 하나가 infinite scroll이다.
아직 서버와 연동을 하지 않았지만 설명을 해본다면,
처음 list page에 들어가면 10개(자신이 정한 양)를 서버에서 불러와서 store에 추가를 해주고, 그것을 불러온다.
총 불러와야하는 양이 엄청 많아도 자신이 정한 양만큼만 불러오기 때문에 시간이 적게 걸린다.
- window.scrollY
- document.documentElement.clientHeight
- document.documentElement.scrollHeight
를 이용해서 구현했다.
(useSelector,useDispatch 등 라이브러리를 이용하는 간단한 코드 설명 생략)
list page에서 useEffect를 통해 첫 렌더링 때 위에서 말한 것과 같이 Load를 먼저해주고, 그 후 스크롤과 전역 상태 변수를 통해서 load를 더할지 말지를 결정한다.
코드는 아래와 같다.
useEffect(()=>{
function onScroll(){
if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight-500){
if(hasMoreData && !loading){
dispatch({
type : LOAD_POST_REQUEST
});
}
}
}
window.addEventListener('scroll',onScroll);
return () =>{
window.removeEventListener('scroll',onScroll);
}
},[hasMoreData,loading]);
로딩이 진행중이지 않고 === 로딩이 완료된 상황 => LOAD_POST_SUCCESS
상황이며 hasMoreData가 true일 때 action dispatch를 한번 더 해주는 코드이다.
hasMoreData === true 인 상황은 아직 더 가져올 data가 서버에 있는 것을 의미한다고 생각하면 된다.
간단하게 말하면 더 가져올 데이터가 남아있고, 로딩이 완료되면 dispatch를 해주는 것이다.
