intersectionobserver1 React 무한스크롤 구현하기(Intersection Observer) intersectionObserver API의 속성을 이용하여 viewport 상태를 체크하여 무한스크롤 구현 타켓생성 (스크롤의 하단부에 타겟을 지정하고, ref를 달아준다. 이 ref를 통해서 교차시점을 확인가능함) 먼저 스크롤의 끝 부분을 감지할 타겟을 만들어야한다. 이 타겟은 스크롤이 끝에 도달했는지 확인하는 데 사용된다. 타겟은 React에서는 useRef 훅을 이용해 만들 수 있다. 아래 코드는 타겟을 만들고 페이지 하단에 위치시키는 예제이다. const target = useRef(null); {isLoaded && Loading...} observer 관찰자 생성 (컴포넌트가 렌더링 완료됨에 따라 observer 가 생성되어야 하므로 useEffect를 활용해야 한다) 하단에 도달했는지 감.. 2024. 1. 22. 이전 1 다음