무한스크롤

무한 스크롤

만약 우리가 어떤 콘텐츠를 감상하고 있는데 스크롤을 계속 아래로 내리는데 추가적인 콘텐츠가 자동으로 생기지 않는다면 매우 불편할 것이다.
그렇다고 처음에 대량의 콘텐츠가 생긴다면 앱이 버벅이거나 초기 로딩이 느릴수도 있다.

그렇기 때문에 일정 범위로 스크롤을 내리면 추가적인 콘텐츠가 계속 생기는 시스템을 추가해줘야 한다.

방법

우리가 일상적으로 보는 화면에서 스크롤을 위치를 알기위해서는 Y축에 관련된 정보가 필요한데 그중에서도 나에게 필요한 정보는 3가지가 있다.

1. 현재 내 스크롤의 위치
2. 화면에 보여지는 화면의 Y축 크기
3. 페이지 전체의 Y축 크기

이렇게 3가지를 출력하기 위해 필요한 함수는 scrollY,clientHeight,scrollHeight이다.
그렇다면 왜 이게 필요한지 알기위해서는 위 함수를 모두 출력해보면 알것이다.

console.log(
  window.scrollY,
  document.documentElement.clientHeight,
  document.documentElement.scrollHeight
);

그렇다면 첫번째 값은 0부터 숫자가 커지는 것을 볼 수있고, 두번째와 세번째 값은 변하지 않고 고정된 값이 출력되는 것을 알 수 있다.
그렇다면 우리는 첫번째 값이 내 스크롤 위치라는 것을 알 수 있고, 두번째 값은 화면에 보여지는 Y축의 길이이며, 세번째 값은 페이지의 전체 Y축의 길이라는 것을 알 수 있다.

이제 모든 정보를 다 알고 있기때문에 이를 활용하여 무한스크롤을 구현해주면 된다.

useEffect(()=>{
  function onScroll(){
      if(window.scrollY+document.documentElement.clientHeight > document.documentElement.scrollHeight-500){
        dispatch({
          type:LOAD_ADD_POST,
        })
      }
  }
  window.addEventListener('scroll', onScroll);
  return ()=>{
    window.removeEventListener("scroll", onScroll);
  }
},[])

이렇게 작성해주면 스크롤을 일정한 범위 아래로 내렸을 때의 값과 화면에 보여지는 값의 합이 전체 페이지 크기에서 500을 빼준 값보다 커지게 되면 콘텐츠를 페이지에 추가해주는 dispatch함수를 실행시켜준다.

만약 페이지 전체에서 일정값을 빼주지 않는다면 페이지를 다 내렸을 때 콘텐츠가 로딩되어 추가되기 상황에 맞게 값을 빼거나 그대로 사용하면 된다.

주의

window.addEvnetListener을 사용하여 이벤트를 부르는데 이는 발생할 때마다 계속해서 메모리에 쌓이기 때문에
꼭 return removeEventListener 을 해서 이벤트를 없애줘야 한다.

또한 스크롤 이벤트는 매우 빈번하게 일어나는 이벤트이기 때문에 위의 코드에서 끝내는 것이 아닌 추가적인 함수를 작성하여 이벤트가 중복으로 발생하지 않게 해줘야 한다.

위 코드는 일정값 이상이 되면 이벤트가 발생하기 때문에 스크롤을 계속 내리게 된다면 수도 없이 dispatch가 실행되서 스스로 서버에 공격하는 셈이 된다.