infinite scroll

Programing/React

ReFlow 를 방지하는 Intersection Observer, 이를 활용한 Hook

프로젝트에서 프론트엔드 부분을 담당하면서 작업을 이어가다 보면, 어느 순간 무한 스크롤 기능을 구현해야 하는 순간이 오게 된다. 아무런 방법을 모른다고 가정 할 때, 머리속에서 방법에 대해 떠올려보면 아마도 가장 먼저 생겨나는 방법은 웹 브라우저 내 스크롤바의 위치에 따라 데이터를 fetch 해오는 과정이 떠오를 것 같다. 물론 아닐수도 있지만 나는 그랬다.. 그야 아주 직관적인 방법이기 때문이다. 스크롤 바가 화면 맨 아래로 이동이 되었을 때, 그 순간 추가적으로 데이터를 가져오게 되면 그게 무한 스크롤이지 않을까. 브라우저에는 이렇게 스크롤 바의 위치를 표현해주는 API 를 제공한다. 이벤트에 구독하여 매 움직이는 순간마다 위치를 가져올 수 있는데, 이를 이용하면 충분히 직관적인 스크롤 이벤트를 구현..

Yelihi
'infinite scroll' 태그의 글 목록