React 무한 스크롤

React

JunsC 2024. 6. 10. 00:43

728x90

리액트에서 페이징 처리를 해야하는 상황이였다...

주로 앱을 작업하였기 때문에 Swift 에서는 tablecell 로 스크롤이 마지막에 닿으면 그때 쓰레드를 통한 페이징처리를 작업하였고

Java에서도 역시 recyclerview 를 이용한 페이징 처리를 진행하였다.

하지만 웹에서는 어떻게 스크롤 끝을 감지하여 페이징하는지 잘 몰라서 검색해보았다..

[FE] React로 무한 스크롤을 구현해보자

강아지를 무한대로 즐길 수 있게 무한 스크롤을 구현해보자. 페이지네이션으로 2페이지, 3페이지 이렇게 넘어갈 수 있음에도 굳이 무한 스크롤을 쓰는 이유는 뭘까? 클릭 하나도 결국 수고로움

velog.io

[React] 무한스크롤 구현 (Intersection Observer)

무한스크롤(Infinite Scroll)이란?

moon-ga.github.io

이 사이트에서 참조한 부분에서 observer 패턴관련한 내용이 있는데 이 걸로 수시로 스크롤 맨 밑을 감지할 수 있었다.

진짜 많이 발전한듯하다 코드들이..

스크롤 감지 부분은 옛날 코드에서는 좀 길었던 것 같긴 했었다... ( 내가 정보력이 없었나 ??)

근데 이 코드 하나만으로 맨 끝 감지할 수 있어서 정말로 편했다.

Swift , Aos 같은 경우는 Collectionview , Recyclerview 의 리스너에서 맨 밑 감지하도록 높이나 메소드를 가져와서 하는데 React 는 자바스크립트 기반이라 바로 한 코드로 할 수 있어서 편했다.