Pagination Custom Hook 구현

헤이즐·2023년 5월 3일
0

프로젝트 Mohaeng

목록 보기
4/5
post-thumbnail

모행은 여행지 정보와 코스에 대한 정보를 주는 정보성 짙은 여행 플랫폼이었기에 페이지네이션이 사용되는 부분이 많았습니다. 해당 페이지네이션을 커스텀 훅으로 구현해 쓸 수 있다면 편리할 것 같아 직접 커스텀 훅으로 구현해보고자 했습니다.

사용하는 곳(UI)

//totalPage = {총 페이지 수} Props로 전달
<Pagebar totalPage={totalPages}/>

페이지 변경 방법

//store 에 page 로 전역 state로 관리중이며 해당 page 변경 시 현재 페이지 변경 가능

//PlaceList.tsx

dispatch(setPage(2)); // 현재 선택한 페이지 2페이지로 변경

// ex) PlaceList.tsx 에서의 사용 방식

useEffect(() => {
    const response = async () => {
      const placeResponse = await axios
        .get(`/places`, {
          params: {
            areaCode: areacode,
            page: page,
          },
          withCredentials: true,
        })
        .then((res) => dispatch(setPlace(res.data.data)));
    };
    response();
  }, [page]);

이 코드는 전역 상태 관리 라이브러리인 Redux를 사용하여 page 를 전역 상태로 관리합니다. useEffect 훅을 사용하여 page 가 변경될 때마다 해당 페이지의 데이터를 가져오는 API 요청을 보내고, 해당 데이터들로 상태를 업데이트합니다.

const page = useSelector((state: RootState) => state.page.page);
  const maxPage = Math.ceil(totalPage?.totalPage / 10);

  const [pageNumbers, setPageNumber] = useState<number[]>([]);

  const [pagePer, setPagePer] = useState(0);

  useEffect(() => {
    const array = [];
    for (let i = 1; i <= 10; i++) {
      array.push(pagePer * 10 + i);
    }
    setPageNumber(array);
    dispatch(setPage(pagePer * 10 + 1));
  }, [pagePer]);

먼저, 사용자에게 totalPage를 prop으로 전달받습니다. 해당 prop을 통해 maxPage 를 계산하여 전체 페이지를 10개씩 분리해줍니다.

그리고 useState 훅을 사용해서 pagePerpageNumbers를 상태로 관리합니다. pagePer는 현재 보여지고 있는 페이지 그룹이 몇 번째 그룹 인지를 의미합니다. pageNumbers는 현재 pagePer 기준으로 10개의 페이지 번호를 담은 배열입니다. 예를 들어 pagePer 가 5라면 pageNumbers 는 51~60 까지의 배열을 상태로 가집니다.

prev , next 를 통해 pagePer 의 상태를 업데이트 하고 useEffect 훅을 사용하여 pagePer의 값이 변경될 때마다 pageNumbers 배열을 업데이트하고, Redux store의 현재 페이지를 해당 pageNumbers 첫 페이지로 변경합니다.

pageNumbers 배열에는 totalPage보다 큰 페이지 번호가 들어갈 수 없도록 조건을 걸어 렌더링합니다.

배운 점

페이지네이션 커스텀 훅은 중복 로직 코드를 피해 팀원 분들과 효율적인 프로젝트를 진행하고 싶었기에, 그리고 커스텀 훅을 코드로 구현해보고 싶다는 욕심 때문에 시작하게 됐습니다. 커스텀 훅의 장점은 컴포넌트 로직을 재사용 가능하게 만듬으로써 코드의 중복을 제거하고, 필요한 곳에서 재사용할 수 있으며, 관심사를 분리하여 관리가 용이해진다는 점에 있습니다.

타 프론트엔드분의 코드에서 제 커스텀 훅을 마주칠 때엔 왠지 모를 뿌듯함이 느껴졌습니다. 커스텀 훅은 어떤 로직을 수행하는 코드인지 쉽게 알아차릴 수 있기 때문에 다른 개발자들과 협업에도 이점을 가져다준다는 것을 배울 수 있었던 좋은 시간이었습니다.

profile
개발자를 꿈꾸며 하루하루 고군분투 중!

0개의 댓글