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;
더 자세하게:
usePagination
함수를 구현하여 data
및 itemsPerPage
매개변수를 전달합니다.currentPage
내장 후크1를 사용하여 useState
상태 변수를 정의합니다.maxPage
변수를 설정합니다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 }
next
함수는 currentPage
를 1씩 증가시키지만 maxPage
를 초과하지 않습니다.prev
함수는 currentPage
를 1씩 감소시키지만 1jump
함수는 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;
결론
이 기사에서는 사용자 정의 반응 후크를 구현하는 방법을 보여주었습니다. 후크는 함수와 상태의 일부를 호출자에게 노출합니다. 호출자는 후크에서 함수를 호출하고 결과 및 페이지 매김을 렌더링하는 방법을 결정합니다. 사용자 지정 후크는 강력하며 재사용 가능한 기능을 정의하는 데 도움이 됩니다.
예, 다른 후크 내에서 내장/커스텀 후크를 재사용할 수 있습니다. ↩
Reference
이 문제에 관하여(React: 페이지 매김을 위한 사용자 정의 후크 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/admantium/react-creating-a-custom-hook-for-pagination-jni텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)