특정 값에 Entry 시 데이터 가져오기_Infinite Scroll

구현 결과

구현 영상

다음과 같이 Scroll값이 화면 상에 끝 지점에 도달했을 경우에 추가적으로 서버에 데이터를 요청하여 화면에 랜더링되도록 기능 구현하였다.

 

리액트 상에서 전역 객체(Window)에 스크롤 이벤트를 바인딩해주는 작업은 이번에 처음하는 거였기 때문에 관련된 코드를 포스팅해보고자 한다.

 

소스 코드

우선, 전역 객체 Window에 Scroll Event를 바인딩해주는 시점은 모든 요소가 화면에 나오는 처음부터 이다.

 

Vanilla Javascript 상에서는 이 작업을 DomContentLoaded 나 load 된 시점에 해주지만 리액트 상에서는 해당 이벤트 발생 시에 Scroll 이벤트를 바인딩해주는 것보다 컴포넌트가 처음 Mount(마운트) 되는 시점에 하는 것이 더 명확하다고 생각이 들었다.

 

이에 다음과 같이 컴포넌트가 처음 마운트 됬을 때만 실행되는 componentDidMount 라이프 사이클 메서드 내에서 Window 전역 객체에 Scroll Event를 바인딩 해주었다.

componentDidMount() {
    window.addEventListener('scroll', this.checkFetchAddData, true);
    
    ( ... )
  }

 

그 다음으론 스크롤 이벤트가 매번 발생할 때마다 실행되는 checkFetchAddData 내에서 다음과 같이 현재 스크롤 된 위치값을 계속 계산해주었고 Entry 지점에 도달하게 되는 순간 서버로 데이터를 요청하는 연산을 하여 추가 데이터를 불러와 화면에 랜더링되도록 코드를 작성하였다.

checkFetchAddData = event => {
    let { scrollTop, scrollHeight, clientHeight } =
      event.target.scrollingElement;

    let targetScrollPos = scrollHeight - parseInt(scrollTop); // 스크롤 끝 지점 계산

    if (targetScrollPos === clientHeight) // 스크롤이 끝 지점에 도달했을 경우
      this.sequenceFetchPath(this.fetchSoleFeedsAddPaths); // 서버에 추가 데이터 요청
  };

하지만 다음과 같이 코드를 작성하였을 경우 다른 컴포넌트 내에서 스크롤 이벤트가 발생하였을 때, 해당 콜백 함수가 계속 실행되면서 의도치 않는 에러가 발생하는 문제가 생겼다.

 

정확한 원인은 찾지 못하였지만 Window 전역 객체에 Scroll Event를 바인딩해었기 때문에, 그 아래에 자식 요소들 또한 간섭을 받는 것이라는 생각이 들었고 해당 메서드 상단에 오류가 발생한 요소들일 경우에는 return 종류하도록 코드를 리팩토링했다.

checkFetchAddData = event => {
    if (
      event.target.className === 'feedsCarousel' ||
      event.target.className === 'commentContainer' ||
      event.target.className === 'profileContainer'
    )
      return;
    
    ( ... )
  };

사실 가상 DOM을 사용하는 리액트 내에서 이렇게 DOM에 직접 접근하는 방식은 본연에 충실치 못하다고 생각이 든다.

향후 리액트 상에서 이벤트 전파 방지를 위한 다른 방안이 있는지에 대해서 추가로 공부를 한 뒤에 포스팅하고자 한다.

 

관련 포스팅

https://choi95.tistory.com/102

스크롤 위치 가져오기