React: 페이지 매김을 위한 사용자 정의 후크 만들기

이 기사에서는 일반적이고 재사용 가능한 페이지 매김 메커니즘을 구현합니다. 자체 사용자 지정 후크를 구현하여 이를 달성할 것입니다.

사용자 지정 후크란 무엇입니까?

official React documentation을 인용하자면:

A custom Hook is a JavaScript function whose name starts with "use" and that may call other Hooks.

본질적으로 사용자 정의 후크는 하나 이상의 prop에 키워드 use 접두사가 붙는 props를 내보내는 React 기능 구성 요소입니다. use prop은 생성자처럼 작동합니다. 기능 구성 요소에 필요한 초기 값을 정의합니다. 다른 소품은 후크의 함수 또는 상태 값일 수 있습니다. 무엇을 노출할지 결정합니다.

요구 사항

페이지 매김은 항목 목록을 다른 "페이지"로 나누는 것입니다. 이를 통해 사용자는 다음, 이전으로 이동하거나 이 컬렉션 내의 페이지로 이동하여 페이지 사이를 탐색할 수 있습니다. 따라서 다음 요구 사항을 확인합니다.

이전 또는 다음 페이지로 이동할 수 있어야 함

컬렉션

의 모든 페이지로 이동할 수 있어야 합니다.

은 현재 페이지

에 해당하는 데이터를 반환해야 합니다.

페이지 매김 사용자 지정 후크의 경우 이는 다음 요구 사항을 의미합니다.

페이지당 항목 수

에 대해 구성 가능해야 합니다.

은 현재 페이지

를 유지하기 위해 상태 저장이어야 합니다.

1단계: 항목 수 및 현재 페이지 구성

사용자 지정 후크 구현을 시작하겠습니다. 먼저 usePagination 생성자를 정의합니다. 데이터와 페이지당 항목 수를 수신합니다. 상태 저장 변수currentPage도 구현합니다.

1 import React, {useState} from 'react';
2
3 function usePagination(data, itemsPerPage) {
4   const [currentPage, setCurrentPage] = useState(1);
5   const maxPage = Math.ceil(data.length / itemsPerPage);
6 }
7
8 export default usePagination;

더 자세하게:

3행에서는 usePagination 함수를 구현하여 data 및 itemsPerPage 매개변수를 전달합니다.

4행에서 currentPage 내장 후크1를 사용하여 useState 상태 변수를 정의합니다.

5행에서 표시할 수 있는 페이지 수의 상한을 정의하는 maxPage 변수를 설정합니다

.

8행에서 usePagination 함수

를 내보냅니다.

2단계: 증가, 감소 및 모든 페이지로 이동

이러한 요구 사항은 후크의 핵심 기능을 제공합니다. 우리는 그것들을 함수로 구현하고 내보낼 것입니다. 따라서 currentPage의 값이 항상 1과 maxPage 값의 범위 내에 있는지 확인해야 합니다.

코드 작성:

1  function next() {
2    setCurrentPage((currentPage) => Math.min(currentPage + 1, maxPage));
3  }
4
5  function prev() {
6    setCurrentPage((currentPage) => Math.max(currentPage - 1, 1));
7  }
8
9  function jump(page) {
10   const pageNumber = Math.max(1, page)
11   setCurrentPage((currentPage) => Math.min(pageNumber, maxPage));
12 }

라인 1: next 함수는 currentPage를 1씩 증가시키지만 maxPage를 초과하지 않습니다.

5행: prev 함수는 currentPage를 1씩 감소시키지만 1

아래로 떨어지지는 않습니다.

9행: jump 함수는 currentPage가 두 제한

내에서 유지되도록 합니다.

3단계: 현재 페이지의 데이터 반환

마지막 단계는 현재 페이지의 데이터만 표시되도록 구현하는 것입니다.

1 function currentData() {
2   const begin = (currentPage - 1) * itemsPerPage;
3   const end = begin + itemsPerPage;
4   return data.slice(begin, end);
5 }

변수data는 페이지 매김 구성 요소의 모든 항목을 보유합니다. 여기에서 배열 인덱스가 itemsPerPage 로 시작하기 때문에 currentPage - 1 값으로 시작하여 정확히 0 를 선택합니다.

페이지 매김 후크: 완전한 구성 요소

전체 구성 요소는 다음과 같습니다.

1  import React, { useState } from "react";
2
3  function usePagination(data, itemsPerPage) {
4    const [currentPage, setCurrentPage] = useState(1);
5    const maxPage = Math.ceil(data.length / itemsPerPage);
6
7  function currentData() {
8    const begin = (currentPage - 1) * itemsPerPage;
9    const end = begin + itemsPerPage;
10   return data.slice(begin, end);
11  }
12
13  function next() {
14    setCurrentPage((currentPage) => Math.min(currentPage + 1, maxPage));
15  }
16
17  function prev() {
18    setCurrentPage((currentPage) => Math.max(currentPage - 1, 1));
19  }
20
21  function jump(page) {
22    const pageNumber = Math.max(1, page);
23    setCurrentPage((currentPage) => Math.min(pageNumber, maxPage));
24  }
25
26  return { next, prev, jump, currentData, currentPage, maxPage };
27 }
28
29 export default usePagination;

결론

이 기사에서는 사용자 정의 반응 후크를 구현하는 방법을 보여주었습니다. 후크는 함수와 상태의 일부를 호출자에게 노출합니다. 호출자는 후크에서 함수를 호출하고 결과 및 페이지 매김을 렌더링하는 방법을 결정합니다. 사용자 지정 후크는 강력하며 재사용 가능한 기능을 정의하는 데 도움이 됩니다.



예, 다른 후크 내에서 내장/커스텀 후크를 재사용할 수 있습니다. ↩