React-Intersection-Observer

React-intersection-Observer

공식 사이트

npm

npm i react-intersection-observer

yarn

yarn add react-intersection-observer

이번 프로젝트를 하면서 인피니티스크롤를 구현할때 굉장히 편리하게 사용했다.

  const [ref, inView] = useInView();

useInView를 사용하면 구성 요소의 InView 상태를 쉽게 모니터링할 수 있습니다.
ref를 지정하고 그 상태를 보여줍니다.

ref가 지정된 div값이 뷰포트 화면안에서 지정된 부분에서
true, false값으로 inView값으로 변합니다.

저는 가장 하단에 빈 컴퍼넌트를 만들어놓고 ref를 지정한 후에 그 부분에서 inView값이
반대로 바뀔때 데이터값이 추가로 불러오게끔 해서 구현을 하였습니다.