Pagination 보완

이전까지 구현한 Pagination에는 아래와 같은 치명적인 문제가 있었다.

이전, 다음 페이지가 게시물이 없는데도 불구하고 무제한으로 생성되고 있다.

따라서, 총 게시물 개수를 불러와서 이 데이터를 토대로 페이지 수를 생성하면 된다.

// fetchBoardsCount API 요청하기
const FETCH_BOARDS_COUNT = gql`
  query fetchBoardsCount {
    fetchBoardsCount
  }
`;

// lastPage 구하기
const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);

그리고 이전 페이지, 다음 페이지를 클릭했을 때 실행되는 함수에 조건을 설정해서

1 페이지 미만, 그리고 lastPage가 화면에 출력된 이후로는

이전 페이지, 다음 페이지 버튼이 동작하지 않도록 만들어준다.

const onClickPrevPage = () => {
	// startPage가 1이면 하단 스크립트를 실행하지 않고 종료한다.
  if (startPage === 1) return; 
  setStartPage((prev) => prev - 10);
};
const onClickNextPage = () => {
	// startPage + 10가 lastPage보다 클 경우 하단 스크립트를 실행하지 않고 종료한다.
  if (startPage + 10 > lastPage) return;
  setStartPage((prev) => prev + 10);
};

그리고 페이지네이션 map에 조건부 렌더링을 걸어서

lastPage보다 큰 숫자는 출력 되지 않도록 만들어준다.

{new Array(10).fill(1).map(
  (_, index) =>
    index + startPage <= lastPage && (
      <span
        onClick={onClickPage}
        id={String(index + startPage)}
        key={index + startPage}
      >
        {` ${index + startPage} `}
      </span>
    )
)}

state lifting(끌어올리기)

React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달밖에 안되는

하향식, 단방향 데이터 흐름을 따르고 있다.

기능 변경 사항에 대한 코드 수정이 적어짐, 복잡하지 않아 코드의 흐름을 알기 쉬움 등의 장점이 있다.

하지만 단방향 데이터 흐름의 단점도 존재한다.

단방향 데이터 흐름의 경우,

위와 같은 구조에서 자식 컴포넌트1의 state를 자식 컴포넌트2에서 보여주는 것이 불가능하다.

또한, 자식 컴포넌트2의 state를 부모 컴포넌트에서 보여주는 것도 불가능합니다.

이러한 경우에는, 저 공유하고자 하는 state를 부모 컴포넌트로 보내버리는 것이다!

그렇게 하면 늘 사용해온 props를 사용해서 자식컴포넌트들에게 state를 전달할 수 있다.
이렇게 state를 공유하기 위해 부모 컴포넌트로 올려버리는 것을 state lifting이라고 한다.

예제코드

import Child1 from "../../src/components/units/14-lifting-state-up/Child1";
import Child2 from "../../src/components/units/14-lifting-state-up/Child2";
import { useState } from "react";

export default function LiftingStateUpPage() {
  const [count, setCount] = useState(0);

  const onClickCount = (): void => {
    setCount((prev) => prev + 1);
  };
  
  return (
    <div>
      <Child1 count={count} setCount={setCount} />
      <div>=========================================</div>
      <Child2 count={count} onClickCount={onClickCount} />
    </div>
  );
}

// 자식 컴포넌트 - Child1.tsx
export default function Child1(props) {

  const onClickCountUp = () => {
    props.setCount((prev) => prev + 1);
  };

  return (
    <div>
      <div>자식 1 카운트: {props.count}</div>
      <button onClick={onClickCountUp}>카운트 올리기</button>
    </div>
  );
}

// 자식 컴포넌트 - Child2.tsx
export default function Child2(props) {
  return (
    <div>
      <div>자식 2 카운트: {props.count}</div>
      <button onClick={props.onClickCount}>카운트 올리기</button>
    </div>
  );
}

Child1에서는 setCount를 props로 전달해서 state값을 변경하고 있고,
Child2에서는 함수를 전달해서 state값을 변경할 수 있게 만들고 있다.
두 방법들 모두 가능하다.