무한스크롤
무한스크롤을 구현하려고 하는데 React에선 어떻게 해야 구현할 수 있을까 고민이 됐다.
관련하여 검색등으로 찾아보니 가장 기본적인 JS에서 이용했던 거와 같이 window.scroll 이벤트를 이용하는 방법이다.
다만 이 방법은 장점으론 구형 브라우저에서도 작동할 수 있겠지만 성능적인 문제가 있었다.
가령 스크롤을 할 때마다 이벤트가 발생하여 성능이슈가 생기거나 스크롤 이벤트가 무거워질 수록 위험했다.
결론적으로 최적화!가 필요한 것이다.
이에 디바운싱과 스로틀링이 있는데
-
debouncing - 연속해서 호출되는 함수들 중 제일 마지막 혹은 처음 함수만 실행되는 것
-
throttling - 마지막 함수가 호출되면 일정 시간 동안은 다시 호출되지 않는 것
debouncing은 주로 input에서 사용되고, throttling은 스크롤 이벤트에 자주 사용된다 고로 throttling를 이용해 무한스크롤 최적화를 진행한다.
라고 할 수 있지만 좋은 API가 있어 사용해보려 한다.
Intersection Observer API
타겟의 변화를 관찰하며 들어가거나 나갈 때 또는 두 요소의 교차 부분만큼 변경될 때 실행된다.
쉽게 말해 두 요소의 상태를 감지하여 콜백 함수를 실행!
요소의 교차를 계속 지켜보기 위해 메인 스레드를 사용할 필요가 없어지고 교차 영역 관리를 최적화 한다.
뭔가 되게 어려운 말인데 직접 사용해 봐야겠다.
무한 스크롤, 이미지 로딩, 광고 노출, 스크롤 애니메이션 등 다양한 UI 구현에서 유용하게 활용된다 하니 꼭 익혀야 될 것 중 하나인 것 같다.
내일 추가적으로 observer api와 무한스크롤 구현에 대해 정리해야겠다
