무한스크롤2 React 무한스크롤 구현하기(Intersection Observer) intersectionObserver API의 속성을 이용하여 viewport 상태를 체크하여 무한스크롤 구현 타켓생성 (스크롤의 하단부에 타겟을 지정하고, ref를 달아준다. 이 ref를 통해서 교차시점을 확인가능함) 먼저 스크롤의 끝 부분을 감지할 타겟을 만들어야한다. 이 타겟은 스크롤이 끝에 도달했는지 확인하는 데 사용된다. 타겟은 React에서는 useRef 훅을 이용해 만들 수 있다. 아래 코드는 타겟을 만들고 페이지 하단에 위치시키는 예제이다. const target = useRef(null); {isLoaded && Loading...} observer 관찰자 생성 (컴포넌트가 렌더링 완료됨에 따라 observer 가 생성되어야 하므로 useEffect를 활용해야 한다) 하단에 도달했는지 감.. 2024. 1. 22. React-query Infinite queries 도입하기 ✔️ Infinite Queries 무한 쿼리 기능은 무한 스크롤이나 더보기와 같이 특정 조건에서 데이터를 추가적으로 받아오는 기능을 구현할때 사용하면 유용한 기능이다. ⇒ 무한 쿼리를 사용하기 위해서는 react-query 중에서 useInfiniteQuery 사용하면 된다. ✔️ infinite queries를 사용한 이유 기존에 구현한 무한스크롤링 방식은 데이터를 가져오는 시점인 target에 도달했을때 새로운 데이터를 가져와서 getData라는 배열에 삽입해서 새로운 데이터를 화면에 로딩하는 방식이었다. setAddData([...addData, ...res.data.data]); 하지만 이러한 방식은 새로운 데이터를 가져와서 로딩하는데에는 문제가 없었지만 하트 기능이나 북마크 기능을 눌렀을때 .. 2023. 6. 6. 이전 1 다음