[규태] 이거 보여줄려고 어그로 끌었다.

[KyuTae98]

!!긴급!!

안녕하세요 돌아온 똥믈리에 박규태입니다.

오늘 여러분에 보여줄 똥같은 코드는 예전 프로젝트에서 사용한 pagination입니다.

TAJO에서도 공통컴포넌트로 pagination을 구현하고 있는데 여러분들은 어떻게 구현하셨는지 조언을 구하고 싶습니다.

"use client"

import React, {useState} from "react";
import {useSearchParams, useRouter, usePathname} from 'next/navigation'


import ProblemStagePageNationBtn from "./ProblemStagePageNationBtn";

interface ProblemStagePageNationType {
    totalStages: number
}


const ProblemStagePageNation: React.FC<ProblemStagePageNationType> = ({totalStages}) => {
    const searchParams = useSearchParams();
    const router = useRouter();
    const pathname = usePathname();
    const params = new URLSearchParams(searchParams);
    const totalPages = Array.from({length: Math.ceil(totalStages / 5)}, (v, pageIndex) =>
        Array.from(
            {length: (pageIndex + 1) * 5 <= totalStages ? 5 : totalStages % 5},
            (v, elemIndex) => elemIndex + 1 + pageIndex * 5
        )
    );
    const [curPageNation, setCurPageNation] = useState(0);//페이지네이션의 현재 위치

    const ChangeChecked = (ele: number) => {
        params.set("page", ele.toString())
        router.push(pathname + "?" + params.toString());
    };


    return (
        <div className="flex">
            <ProblemStagePageNationBtn pageMove={() => {
                ChangeChecked(totalPages[curPageNation - 1][0]);
                setCurPageNation(pre => pre - 1)
            }} checked={curPageNation === 0} pageBtn={"<"}/>

            {totalPages[curPageNation]?.map((ele, index) => (
                <ProblemStagePageNationBtn
                    pageMove={() => {
                        ChangeChecked(ele);
                    }}
                    curPage={searchParams.get("page") ? Number(searchParams.get("page")) : 1}
                    key={ele}
                    pageBtn={ele}
                />
            ))}

            <ProblemStagePageNationBtn
                pageMove={() => {
                    ChangeChecked(totalPages[curPageNation + 1][0]);
                    setCurPageNation((pre) => pre + 1);
                }}
                checked={curPageNation === totalPages.length - 1}
                pageBtn={">"}
            />
        </div>
    )
}

export default ProblemStagePageNation

코드를 보시면 아시겠지만 벌써부터 냄새가 진동합니다...

제 알고리즘 실력을 뽑내고 싶었던지 배열을 미리 정해버리고 코드를 작성해 버렸네요,,, (큰 배열 렌더링 문제,,,)

여기서 잠깐!

여러분들에게 조언을 구하고 싶은 부분을 적어보겠습니다..

1. 공통컴포넌트로 만들면서 어떤걸 props로 정리할지
2. 공통컴포넌트를 개발하면서 view와 비즈니스 로직을 어느정도 분리하는지
3. 저 코드에서 꼴보기 싫은 부분은 어디인지

여러분들의 많은 조언들이 TAJO에 큰 발전이 됩니다,,,,

그럼 이만,,,

[regularPark]

해적왕박규태 코딩실력 ㄹㅇ실화냐? 진짜 무하유최강자(이하 생략)

---

네 반갑습니다 규태님

공통컴포넌트로 만들면서 어떤걸 props로 정리할지
공통컴포넌트를 개발하면서 view와 비즈니스 로직을 어느정도 분리하는지

두 가지 질문에 대해 한번에 제 생각을 말씀드릴 수 있을 것 같은데요. 공통컴포넌트 같은 경우 저는 비즈니스 로직이 컴포넌트 외부에서 돌아가고 뷰쪽에서는 로직을 모르고 있는 형태를 선호합니다. 페이지네이션 같은 경우,관련 로직을 usePagination훅으로 관리하고 뷰를 위해 필요한 props인 totalPages, curPage 같은 정보만 전달해줘서 로직은 모르도록 구현할 것 같습니다!

저 코드에서 꼴보기 싫은 부분은 어디인지

가슴이 웅장해지는 중첩 Array.from 이군요?! totalPages라는 이름에 2차원 배열이 들어가는데,
제가 이해한 게 맞다면

[
  [1,2,3,4,5],
  [6,7,8,9,10]
  [11,12]
]

이런 느낌의 배열이 생성될 것만 같은데, 제 부족한 머리로는 해당 코드가 잘 읽히지가 않네요🥲 다른 방식으로도 해당 2차원 배열을 생성할 수 있을 것 같은데 규태님 생각은 어떠신가요?

[Wisesaturn]

Pagination 저도 인턴 생활하면서 같은 싸움을 한 적이 있습니다 ㅋㅋㅋㅋㅋ
짤막하게 가져와보자면... 다음처럼 구현했네요

/**
 *
 * @param totalPage 총 Pagination Length
 * @param currentPage 현재 Page
 * @param onChangePage 해당 페이지로 이동할 때 기능 동작
 * @param nearbyPages (optional) 페이지가 보이는 갯수
 */
export default function Pagination(props: Props) {
  const { currentPage, totalPage, onChangePage, nearbyPages = 9 } = props;
  const [page, setPage] = useState(currentPage);

  /* Page값이 없을 때 null값 return */
  if (totalPage === 0) return <></>;

  /* 페이지 보여지는 숫자 부분 계산 */
  const halfNearbyPages = Math.floor(nearbyPages / 2);
  let start = Math.max(1, currentPage - halfNearbyPages);
  const end = Math.min(totalPage, start + nearbyPages - 1);
  if (end === totalPage) {
    start = Math.max(1, totalPage - nearbyPages + 1);
  }

  /* 페이지 보여지는 부분 배열화 */
  const pages = Array.from({ length: end - start + 1 }, (_, index) => start + index);


 // (...클릭 이벤트 생략...)

  return (
    <div className={styles.Pagination}>
      <button type="button" disabled={page === 1} className={styles.Pagination_btn} onClick={onClickMorePrev}>
        <IconArrowMorePrev />
      </button>
      <button type="button" disabled={page === 1} className={styles.Pagination_btn} onClick={onClickPrev}>
        <IconArrowPrev />
      </button>
      {pages.map((pageNumber) => (
        <button
          key={pageNumber}
          className={pageNumber === page ? styles.Pagination_btn_selected : styles.Pagination_btn}
          type="button"
          onClick={(e) => handleChange(e, pageNumber)}
        >
          {pageNumber}
        </button>
      ))}
      <button type="button" disabled={page === totalPage} className={styles.Pagination_btn} onClick={onClickNext}>
        <IconArrowNext />
      </button>
      <button type="button" disabled={page === totalPage} className={styles.Pagination_btn} onClick={onClickMoreNext}>
        <IconArrowMoreNext />
      </button>
    </div>
  );
}

useState를 안에다 두어서 state를 내부에다가 관리하고, 각각의 버튼마다 최대한 알아보기 쉽도록 분리하면서 짰던 기억이 떠오릅니다
지금 다시 짠다면 페이지 보여지는 숫자 부분을 따로 빼어서 관리하면 더 깔끔했을 것 같아요

밑에 컴포넌트는 어느 정도 가독성이 있어서 괜춘해 보이고
계산하는 부분이 조금 명확하면 더 야무질 것 같습니다 ㅎㅎ

 const totalPages = Array.from({length: Math.ceil(totalStages / 5)}, (v, pageIndex) =>
        Array.from(
            {length: (pageIndex + 1) * 5 <= totalStages ? 5 : totalStages % 5},
            (v, elemIndex) => elemIndex + 1 + pageIndex * 5
        )
    );

여기서 굳이 분류하자면

    const startStage = pageIndex * stagesPerPage + 1;
    const endStage = Math.min((pageIndex + 1) * stagesPerPage, totalStages);

이렇게 변수로 나누는 느낌..?

[qhahd78]

안녕하세요 뉴진스의 6번째 멤버 규태님~
바로 리뷰 갑니다

1. usePagination hook

저는 페이지네이션 할 때 usePagination 이라는 훅을 만들어서 사용했었습니다. 하도 예전이라 코드는 없지만

goToPrev, goToNext, currentPage, totalPage .... 등을 리턴하는 훅으로 만들었습니다.

• 해적왕님의 코드에서 total page 구하는 쪽이 굉장히 어려워보이는데, 저것은 utils 로 빼거나 usePagination hook 에 같이 넣어버리면 될 것 같슴다. (사실 저 로직이 어떻게 작동하는지 잘은 모르겠어서리)

2. react-query 랑 같이 쓰기

• 요건 살짝 논외인데요 제가 notification 프로젝트 할 때 react-query 랑 같이 쓰려고 했었던 기억이 있어서 공유합니다.

  • 한줄요약 : queryKey 에 size, page, searchQuery 넣어서 페이지네이션 실행될 때마다 api 도 콜해서 패치함.

• 처음에 useEffect 로 만들었다가 한무렌더 + 오류 투성이를 맛보고 그제서야 쿼리키로 바꾸었던 악몽이 떠오르네요.... 여러분은 저처럼 악몽을 꾸지 않으시길 바라며 코드 남기고 갑니다..

import { useQuery } from '@tanstack/react-query';
import { useQueryFunc } from '@/hooks/common/useQueryFunc';
import { getTemplates } from '@/services/common/template-services';
import { TemplateSearchQueryType } from '@/types/notification/[notification-type]/template/TemplateSearchQueryType';
import { TemplateListType } from '@/types/notification/[notification-type]/template/TemplateType';

export const useTemplates = (
  notificationType: string,
  templateSearchQuery: TemplateSearchQueryType,
  size?: number,
  page?: number,
) => {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: [templateSearchQuery, size, page],
    queryFn: () =>
      // eslint-disable-next-line react-hooks/rules-of-hooks
      useQueryFunc<TemplateListType>(
        getTemplates(
          notificationType,
          { page: page ? page : 1, size: size ? size : 10 },
          templateSearchQuery,
        ),
      ),
    refetchOnWindowFocus: false,
    notifyOnChangeProps: ['data'],
  });

  return {
    templatesList: data,
    templatesListIsLoading: isLoading,
    templatesListError: error,
    refetchTemplatesList: refetch,
  };
};

해적왕님 오늘도 고생하셨습니당 b