어떻게 구현했는지를 보여주는 글이 아닌 React 에서 어떻게 적용할 지 생각을 정리한 글 입니다.
React + Infinity Scroll
처음 React 를 공부할 때 클래스 형 리액트에서 리액트의 생명주기를 찐하게 느꼈던 기능 구현이 하나 있었는데 바로 무한 스크롤이다.
스크롤 이벤트마다 리렌더링이 일어나고, 스크롤의 위치를 받아와서 viewport 의 scroll height 를 고려하는 등 어려웠던 기억이 난다.
코드스쿼드 과정을 하면서도 무한스크롤은 아니지만 스크롤 이벤트를 받아서 Header 의 CSS 속성을 수정하는 로직을 작성했던 적도 있었는데, 그 때는 throttling 을 활용해서 무수한 이벤트가 발생하는 것을 억제했던 기억이 났다. 그래서 그것을 활용해서 접근해볼까 하다가
다른 사람들도 비슷한 생각으로 구현하는지 궁금해 구글링을 해보다가 Intersection Observer 라는 키워드를 찾았다.
Intersection Observer 는 Web API 이다. 맨 처음 이 API 를 봤을 때, 브라우저 사용 지원 범위를 먼저 확인해봤는데 IE 에서는 그냥 사용이 불가능했다.
viewport 안에 내가 확인할 Element 가 있는지를 판단하는 observer 를 등록하여 그 viewport 안에 있는지를 비동기적으로 확인할 수 있다. ( entry.isIntersecting )
편하게 사용할 수 있었지만 polyfill 관련 검색해보면서 실무에서 사용될 때의 이슈는 없는지도 궁금했다.
사용자의 현재 화면 상태를 확인하여 광고가 어떻게 노출되었는지를 판단하여 광고의 실효성을 확인하고, 합리적인 광고 요금 청구를 하는 데 있어서 애로사항이 있다고 한다.
IntersectionObserver 는 루트 요소와 타겟 요소의 교차로 가시성을 판단하기 때문에 고속 스크롤링으로 인한 무의미한 노출을 배제하기가 어렵다는 것이 메인 이슈인 것 같다. 자세한 글은 해당 블로그에서
+) Babel 과 신나게 씨름했던 기억이 나서 Babel 의 core-js 가 해당 API 를 polyfill 해주는지 궁금해 검색해봤는데, 2018 년의 issue 이긴 하지만 core-js 는 ECMAScript feature 와 관련된 것을 지원하는 것인데, Intersection Observer 는 browser-only 이므로 지원할 계획이 그때 당시에는 없다고 한다. (this position can be changed, but not soon) issue
IE 환경을 대응하고 싶다면, w3c 에서 지원하는 polyfill 을 별도로 사용하면 된다.
