페이지 매김을 추가하기 쉬운 React Query

쪽수 매기기

페이지 매김은 웹 사이트 성능을 더 스마트하게 처리하는 데 사용되는 기술입니다. 요즘에는 사용자가 맨 아래로 스크롤한 새 데이터를 가져오거나 페이지를 매기자마자 무한 스크롤 페이지 매김 의미를 제공하는 경우가 많습니다.

내 웹 사이트iHateReading에 이 페이지 매김 기술을 추가합니다. 내가 사용하고 있던 기술 스택은 API 호출 및 데이터 캐싱을 위한 반응 쿼리입니다.

. 이 API는 기본적으로 브라우저가 독점 DOM 요소 위치를 추적하고 감지하는 데 도움이 됩니다. 교차 API는 DOM 요소 위치를 추적하고 임계값을 초과할 때 콜백 메서드를 호출하는 데 도움이 됩니다.

실제 사례

긴 블로그 목록의 맨 아래 위치에 추가 로드 버튼이 있다고 가정해 보겠습니다.

추가 로드 버튼을 누르거나 보기에 들어오면 API를 사용하여 새 데이터를 가져옵니다

.

Intersection API는 기본적으로 load more 버튼 보기를 추적하고 교차 시점에 콜백 메서드를 호출하는 데 도움이 됩니다.

쿼리 반응

React 쿼리는 프런트엔드에서 데이터를 캐싱하고 가져오는 데 도움이 되는 후크 모음입니다. 이미 많은 이야기를 다루었기 때문에 react-query 세부 사항에 대해서는 다루지 않겠습니다.

React query article

페이지 매김을 추가하는 방법

메서드를 2단계로 나누어 보겠습니다. 하나는 API 호출이고 다른 하나는 페이지 매김 또는 페이지 번호입니다.

데이터를 가져오기 위한 API 호출
API 호출은 데이터베이스에서 요소를 가져와야 하는 페이지 번호를 가져옵니다. 예를 들어, 첫 번째 페이지는 10개의 항목을 가져오고 페이지 번호 = 2는 11부터 20번째 항목까지 항목을 가져오는 식입니다.

const {data, isLoading } = useQuery(["blogs"], 
 async() => { 
  const data = await fetchBlogs(pageNumber);
  return data;
 }
);

페이지 번호
페이지 번호는 UI에서 추적하고 유지 관리합니다. 사용자가 추가 로드 버튼에 도달하는 즉시 Intersection API는 콜백 메서드를 호출하고 페이지 번호를 1씩 증가시킵니다. 이는 페이지 번호가 마지막 값에 도달할 때까지 계속 발생합니다.

const [pageNumber, setPageNumber] = useState(0);
const [isIntersecting, setIntersecting] = useState(false);
const observer = new IntersectionObserver(([entry]) =>
 setIntersecting(entry.isIntersecting));

useEffect(() => {
 observer.observe(ref.current);
   return () => observer.disconnect();
}, []);

페이지가 매겨진 데이터를 가져오는 API

추가 로드 버튼에 도달하는 즉시 isIntersection 상태가 true

로 변경됩니다.

교차 API의 콜백 함수가 가져오고 페이지 번호 값이 1씩 증가합니다.

useQuery는 업데이트된 pageNumber 값을 전달하여 fetchBlogs 메서드를 호출하여 API 호출을 다시 호출합니다.
따라서 페이지가 매겨진 데이터 또는 다음 10개 항목을 가져옵니다.
React 쿼리는 이 새로운 데이터를 자동으로 캐시하여 더 나은 사용자 경험을 제공하고 API 호출 수를 줄입니다.

결론

반응 쿼리 및 교차 API를 사용하여 구현하기가 매우 쉽습니다. 그렇지 않으면 사용자가 웹 페이지를 스크롤한 다음 페이지 번호를 늘리고 다음 10개 항목을 가져오기 위해 API를 다시 호출할 때마다 더 로드 버튼 위치를 추적해야 합니다.
약간 지저분해지고 성능도 저하되지만 react-query 및 교차 API를 사용하여 애플리케이션 성능을 개선하는 불필요한 재렌더링을 피하고 있습니다.

계속 개발
슈리
iHateReading