인피니티 스크롤링 구현하기

무한 스크롤링 구현

handleScroll = () => {
    const { movieList, movieLists, listLength } = this.state
    const { innerHeight } = window;
    const { scrollHeight } = document.body;
    const scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    if (scrollHeight - innerHeight - scrollTop < 50 && movieList.length !== movieLists.length) {
        this.setState(prevState => {
           return { 
             movieList: movieLists.slice(0,listLength),
             listLength: prevState.listLength + 20
          }
        })
    }
  };

 componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
 }

 componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

document.documentElement.scrollTop로 현재 스크롤 값을 가져옴
innerHeight는 현재 창에 보이는 높이값 (노트북 기준 약 768px)
srcollHeight는 현재 창의 전체 높이값

전체 높이값 - 현재 보이는 높이값 - 현재 스크롤위치값으로 스크롤이 바닥에 닿았을 때를 계산해서 이벤트를 발생시킨다.

바닥에 닿으면 movieList를 20개씩 슬라이스해서 가져온다.