React Hook을 사용하여 React에서 페이지 매김을 구현하는 방법

웹 애플리케이션은 방대한 양의 정보를 관리할 수 있습니다. 예를 들어, 전자상거래 애플리케이션은 수십억 개의 데이터를 질서정연하고 미적으로 보기 좋은 방식으로 표시할 수 있습니다. 본질적으로 데이터는 간단하고 사용자 친화적인 방식으로 전달되어야 합니다.

모든 정보를 단일 페이지에 표시하고 싶은 유혹이 있지만, 그렇게 하면 로딩 시간 단축, 사용자 만족도 저하 및 기타 성능 관련 문제가 발생할 수 있습니다. 이러한 문제를 완화하기 위해 페이지 매김 기능을 통합하면 매우 유용할 수 있습니다.

React 애플리케이션에서 페이지 매김을 구현할 때 페이지 매김 라이브러리에서 제공하는 조립식 컴포넌트를 사용하거나 React 후크를 활용하여 맞춤형 솔루션을 구성할 수 있습니다.

클라이언트 측 페이지 매김 구현

페이지 매김은 클라이언트 측 또는 서버 측 기술을 사용하여 애플리케이션에서 구현할 수 있지만, 기본적으로 두 접근 방식은 동일한 원칙을 따릅니다. 클라이언트 측 페이지 매김은 전적으로 사용자의 웹 브라우저 내에서 실행되는 반면, 서버 측 페이지 매김은 페이지 매김 로직을 관리하기 위해 서버에 의존합니다.

다음을 포함하되 이에 국한되지 않는 다양한 방법을 사용하여 서버 측 페이지 매김을 구현할 수 있습니다:

페이지 기반 페이지 매김의 활용에는 정보를 미리 정해진 부분 또는 페이지로 세분화하여 일반적으로 페이지당 특정 수의 요소를 표시하는 것이 포함됩니다. 사용자는 페이지 번호 또는 이전 및 다음 옵션으로 레이블이 지정된 탐색 링크 또는 버튼을 사용하여 페이지를 탐색할 수 있습니다. 이 기술은 검색 엔진과 전자상거래 플랫폼에서 널리 선호되는 기술입니다.

무한 스크롤을 활용하면 웹페이지를 진행하면서 추가 콘텐츠를 자동으로 로드하고 표시할 수 있으므로 중단 없이 일관된 브라우징 환경을 제공할 수 있습니다. 이 접근 방식은 소셜 미디어 타임라인과 같이 지속적으로 증가하는 상당한 양의 정보를 포함하는 웹사이트에 특히 실용적입니다.

React Hook을 사용하여 페이지 기반 페이지 매김 구현하기

이를 시작하려면 React 프로젝트를 설정해야 합니다. 사용할 수 있는 한 가지 옵션은 “create-react-app” JavaScript 명령을 사용하여 로컬 컴퓨터에서 기본 React 애플리케이션을 설정하거나, Vite를 사용하여 컴퓨터에서 React 프로젝트를 빌드하는 것입니다.

본 튜토리얼에서는 Vite를 사용했으며, 이 프로젝트의 해당 코드는 앞서 언급한 GitHub 리포지토리를 통해 액세스할 수 있습니다.

React 프로젝트를 설정한 후 React Hook을 이용해 페이지 기반 페이지 매김을 구현해 보도록 하겠습니다.

데이터 세트 구성

일반적으로 데이터베이스에서 데이터를 가져와서 표시하는 것이 이상적입니다. 하지만 이 튜토리얼에서는 대신 더미 JSONPlaceholder API 에서 데이터를 가져옵니다.

React 함수형 컴포넌트가 생성되었고, 그 안에 여러 상태가 정의되었습니다.

컴포넌트를 마운트하면 UseEffect Hook이 트리거되어 외부 API 엔드포인트에서 데이터를 검색한 다음 JSON 포맷으로 변환합니다. 이 프로세스는 가져온 할 일 정보로 상태 변수를 업데이트합니다. 또한 DisplayData 함수는 가져온 데이터를 활용하여 할 일 항목이 포함된 정렬되지 않은 목록의 형태로 표시합니다.

페이지 매김 구성 요소의 검색 섹션에서 검색된 정보를 사용자 인터페이스에 표시하기 위해 displayData 함수의 기능을 통합하는 것이 필수적입니다. 참조를 위해 코드의 수정된 버전이 아래에 제공되었습니다:

본 인스턴스에는 200개의 작업 목록이 있습니다. 하지만 실제 상황에서는 소프트웨어 프로그램이 상당한 양의 정보를 처리할 가능성이 높습니다. 이러한 방대한 데이터를 단독 웹 페이지에 표시하면 로딩 시간이 느려지고 애플리케이션의 운영 효율성이 저하되는 등 성능 문제가 발생할 수 있습니다.

이 문제를 완화하려면 애플리케이션 내에서 페이지 매김을 구현하여 각 페이지에 탐색 버튼을 사용하여 개별적으로 액세스할 수 있는 관리 가능한 양의 콘텐츠가 표시되도록 해야 합니다.

이 방법을 활용하면 사용자가 보다 체계적이고 정돈된 방식으로 정보를 열람할 수 있어 소프트웨어의 운영 효율성과 사용자 만족도를 높일 수 있습니다.

페이지당 제한된 수의 항목을 표시하기 위한 페이지 매김 로직 구현

각 페이지에 어떤 작업을 표시할지 결정하기 위해서는 관련 논리 원칙을 도입하는 것이 필수적입니다. 하지만 이 프로세스를 시작하기 전에 사용 가능한 작업 목록의 범위를 고려하여 필요한 전체 페이지 수를 계산하는 것이 중요합니다.

페이지 매김 구성 요소에 페이지 매김 기능을 통합하기 위해 다음 코드를 포함할 수 있습니다.

  const pages = [];
 for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
   pages.push(i);
 } 

앞서 언급한 코드 블록은 데이터 배열에 대한 반복을 수행하여 해당 배열의 길이를 처음에 5로 설정된 itemsPerPage 상태 변수의 값으로 나누어 필요한 페이지 수를 결정합니다.

그럼에도 불구하고, 추론의 유효성을 검증하기 위해 필요하다고 판단되는 경우 상기 수량을 조정할 수 있습니다.궁극적으로 각 페이지 번호는 각 배열에 추가됩니다. 그런 다음 페이지당 요소 수를 표시하는 기능을 통합해 보겠습니다.

 const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const pageItems = data.slice(indexOfFirstItem, indexOfLastItem); 

이 코드는 “currentPage” 및 “itemsPerPage” 값을 활용하여 웹 페이지에 표시할 작업을 계산합니다. 이 작업은 “슬라이스” 메서드를 사용하여 “데이터” 배열에서 작업 인덱스의 하위 집합을 선택함으로써 수행됩니다. 그런 다음 이러한 인덱스를 사용하여 대상 페이지에 속하는 특정 작업을 가져옵니다.

forEach 루프는 “pageTitles” 상태의 각 항목을 반복하여 “displayData” 배열에 푸시합니다. 그런 다음 맵 함수 내에서 구조 파괴를 사용하여 “displayData” 내의 각 하위 배열의 첫 번째 요소를 추출합니다. 그런 다음 이 값을 필요한 다른 프로퍼티와 함께 “ToDoItem” 컴포넌트에 프로퍼티로 전달합니다. 마지막으로 페이지에 테이블로 렌더링할 ToDoItems 목록을 반환합니다.

 return (
  <>
   <h1> Pagination Component</h1> <br />
    {displayData(pageItems)}
  </>
); 

이 수정 사항을 구현함으로써 디스플레이데이터 함수의 기능이 현재 페이지와 관련된 허용 가능한 양의 할 일 항목만 표시하도록 최적화됩니다.

탐색 버튼을 통한 페이지 액세스 및 탐색 간소화

여러 페이지에서 사용자의 탐색 및 접근성을 용이하게 하기 위해서는 페이지 번호별 버튼 외에 이전 및 다음 버튼과 같은 페이지 매김 컨트롤을 통합하는 것이 필수적입니다.

이제 페이지 매김 구성 요소의 페이지 번호 버튼과 관련된 로직을 소개하겠습니다. 이를 위해 앞서 언급한 컴포넌트에 다음 코드를 통합하세요.

   const handleClick = (event) => {
    setcurrentPage(Number(event.target.id));
  };

  const renderPageNumbers = pages.map((number) => {
    if (number < maxPageNumberLimit +1 && number > minPageNumberLimit) {
      return (
        <li
          key={number}
          id={number}
          onClick={handleClick}
          className={currentPage == number ? "active" : null}
        >
          {number}
        </li>
      );
    } else {
      return null;
    }
  }); 

사용자로부터 페이지 번호 버튼 클릭에 대한 알림을 수신하면 handleClick 함수가 활성화되어 currentPage 상태 변수의 현재 상태를 선택한 페이지 번호와 동일하게 설정하여 업데이트합니다.

`renderPageNumbers` 함수는 `map` 메서드를 사용하여 `pages` 배열을 순회하며, 각 페이지 번호를 동적으로 나타내는 HTML `

   const handleNextbtn = () => {
    setcurrentPage(currentPage + 1);
    if (currentPage + 1 > maxPageNumberLimit) {
      setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
    }
  };

  const handlePrevbtn = () => {
    setcurrentPage(currentPage - 1);
    if ((currentPage - 1) % pageNumberLimit == 0) {
      setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
    }
  }; 

  return (
    <>
      <h1> Pagination Component</h1> <br />
      {displayData(pageItems)}
      <ul className="pageNumbers">
            <li>
            <button
                onClick={handlePrevbtn}
                disabled={currentPage == pages[0] ? true : false}
            > Previous
            </button>
            </li>
   
            {renderPageNumbers}

            <li>
            <button
                onClick={handleNextbtn}
                disabled={currentPage == pages[pages.length - 1] ? true : false}
            > Next
            </button>
            </li>
      </ul>
    </>
  );