코드 리뷰 사이트 개인 회고 5일차

<회고록>

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다.

 

1. 페이지네이션 버튼 구현

페이지 네이션 버튼 구현을 진행하면서 굉장히 어려웠던 점은 좌우 방향표를 눌렀을 때 현재 위치에 따라 disabled 또는 abled 처리를 진행해야 한다. 이는 정말로 어려운 것이었다. 왜냐하면 상위 부모 컴포넌트에 이에 대한 로직을 작성하고 이를 자식에게 props로 넘겨줘서 이 props에 따라서 조건부 css를 해야 하기 때문이다. 그래서 나는 이를 해결하기 위해서 부모 컴포넌트인 review list 컴포넌트에다가 로직을 다음과 같이 작성했다.

  const onClickPages = (number) => setCurrPage(number);

  const onClickPrevPages = () => {
    if (currPage > 1) {
      setCurrPage(currPage - 1);
    }
  };

  const onClickNextPages = () => {
    if (currPage < Math.ceil(data?.length / 6)) {
      setCurrPage(currPage + 1);
    }
  };

그리고 이를 props로 받을 때는 다음과 같이 받는다.

const Pagination = ({
  currPage,
  totalPages,
  itemPerPages,
  onClickPages,
  onClickPrevPages,
  onClickNextPages,
}) => {

이런 식으로 props를 받았을 때 장점은 totalPages와 itemPerPages를 통해서 현재 묶음의 갯수를 구하고 onClickPages , onClickPrevPages , onClickNextPages를 통해서 로직을 처리할 수 있다. 또한 currPage를 통해서 현재 페이지 넘버에 연속적인 숫자를 더해서 구할 수 있었다.