3월 17일 TIL

페이지네이션 구현

react로 페이지네이션 구현하기

  const [page, setPage] = useState(1); // 현재페이지 표시
  const [totalPage, setTotalPage] = useState([]); // 총 페이지 수를 배열로 저장
  const [fivePage, setFivePage] = useState(0); // 페이지를 5개씩 잘라서 보여줄 예정

  const pageContentCount = 7; // 페이지에 보여줄 컨텐츠 양
  const totalCount = 54; // 임시로 정해둔 총 컨텐츠 양
  const totalPageCount = Math.ceil(totalCount / pageContentCount);
	// 페이지는 무조건 올림처리 해준다. 
	// totalPageCount는 총페이지수를 number로 저장
  useEffect(() => {
    let paginationNumber = [];
    for (let i = 1; i <= totalPageCount; i++) {
      // 여기서 총페이지수를 배열로 저장 ex) [1, 2, 3, 4]
      paginationNumber.push(i);
    }
    setTotalPage(paginationNumber);
    // 배열 state로 저장
  }, []); // 처음렌더링때 페이지 수를 저장

  const handlePageCount = bool => {
    if (bool) {
      setFivePage(fivePage - 1);
      // 이전페이지
      // 0에서 -1로 가지 않도록 예외처리 필수! 
    } else {
      setFivePage(fivePage + 1);
      // 다음페이지
    }
  };

렌더링 부분

	<div>
      <button onClick={() => handlePageCount(true)}>
        <AiOutlineDoubleLeft />
      </button>
      <button onClick={() => handlePageCount(false)}>
        <AiOutlineDoubleRight />
      </button>
    </div>
    <ul>
      {totalPage
        .slice(fivePage * 5, fivePage * 5 + 5) // slice 함수
        .map((value, index) => (
        <li key={index}>
          <button
            className={page === value ? 'active' : ''}
            onClick={() => setPage(value)}
            >
            {value}
          </button>
        </li>
      ))}
   </ul>

여기서 slice 기능을 확실하게 복습하지 않아서 한참 헤맸다
그런 의미에서 Array.prototype.slice() 메소드 복습해보자

지난 TIL 에서 작성한 sort메소드는 원본배열을 변경하는 함수였다!
(헷갈릴땐 mdn꼭 검색해보기...✨)

slice 메소드는 '원본배열을 변경하지 않습니다'
slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.

반환값 : 추출한 요소를 포함한 새로운 배열

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// output: Array ["camel", "duck", "elephant"]
// 인덱스 2번부터 끝까지

console.log(animals.slice(2, 4));
// output: Array ["camel", "duck"]
// 인덱스 2번부터 인덱스 4번 바로 전 (3번) 인덱스까지

console.log(animals.slice(1, 5));
// output: Array ["bison", "camel", "duck", "elephant"]
// 인덱스 1번부터 인덱스 5번 바로 전 인덱스까지

console.log(animals.slice(-2));
// output: Array ["duck", "elephant"]
// 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 
//slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.

console.log(animals.slice(2, -1));
// output: Array ["camel", "duck"]
// 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 
//slice(2,-1) 는 세번째부터 끝에서 두번째 요소까지 추출합니다.

console.log(animals.slice());
// output: Array ['ant', 'bison', 'camel', 'duck', 'elephant']
// end가 생략되면 slice()는 배열의 끝까지(arr.length) 추출합니다.

console.log(animals.slice(7);
// output: Array ['ant', 'bison', 'camel', 'duck', 'elephant']
// 만약 end 값이 배열의 길이보다 크다면, silce()는 배열의 끝까지(arr.length) 추출합니다.

아래 참고 문서를 기억하기 위해 정리해놓았습니다.

👉참고문서
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice