IntersectionObserver (1) 썸네일형 리스트형 React로 Intersection Observer 없이 Viewport 감지 구현하기 Intersection Observer API는 특정 엘리먼트가 viewport에 보일 때 관찰할 수 있게 해준다. 주로 페이지 성능 개선을 위해 Lazy Image Loading 등에 사용한다. 하지만 여기서는 Intersection Observer를 사용하지 않고, React와 TypeScript로 비슷한 기능을 직접 구현해보자.1. 화면 크기 구하기 및 이벤트 감지엘리먼트가 화면에 보이는지 관찰하려면, 먼저 window의 width, height를 알아야 한다. 화면 크기가 변할 때마다 관찰 함수를 실행하도록 resize 이벤트 핸들러를 추가한다. 또한, 스크롤이 발생할 때도 엘리먼트 위치를 재확인해야 하므로 scroll 이벤트 핸들러도 등록한다.// useEffect 예시useEffect(() =.. 이전 1 다음