2022_01_27

• container 에서 state가 변경되게 되면 전체 컴포넌트가 refresh 되는것이 아니라 해당 state를 사용하고 있는 컴포넌트만 refresh 가 된다.
• 페이지 처리 방식에는 무한스크롤 방식, 일반적인 방식(페이지네이션)이 있다.

페이지네이션

• 페이지 번호를 클릭해서 이동하는 방식

export default function PaginationNextPage() {
  const [startPage, setStartPage] = useState(1);
  const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS, { variables: { page: startPage } });
  const { data: dataBoardCount } =
    useQuery<Pick<IQuery, "fetchBoardsCount">>(FETCH_BOARDS_COUNT);
  const lastPage = Math.ceil(Number(dataBoardCount?.fetchBoardsCount) / 10);

  const onClickPage = (event: MouseEvent<HTMLSpanElement>) => {
    refetch({ page: Number(event.currentTarget.id) });
  };

  const onClickPrevPage = () => {
    if (startPage <= 1) return;
    setStartPage((prev) => prev - 10);
    // refetch({ page: startPage - 10 });
  };

  const onClickNextPage = () => {
    if (startPage + 10 > lastPage) return;
    setStartPage((prev) => prev + 10);
    // refetch({ page: startPage + 10 });
  };

  return (
    <div>
      <h1>페이지네이션 연습!!</h1>
      {data?.fetchBoards?.map((el) => (
        <div key={el.createdAt}>
          {el.title} {el.writer}
        </div>
      ))}
      <span onClick={onClickPrevPage}>이전페이지</span>
      {new Array(10).fill(1).map(
        (el, index) =>
          index + startPage <= lastPage && (
            <span
              key={index + startPage}
              onClick={onClickPage}
              id={String(index + startPage)}
            >
              {`  ${index + startPage}  `}
            </span>
          )
      )}
      <span onClick={onClickNextPage}>다음페이지</span>
    </div>
  );

Lifting-State-Up

• Reac는 하양식, 단방향 데이터 흐름을 특징으로 한다.
• 기능 변경에 따른 수정이 적고 코드의 흐름이 알기 쉽다.
• 상위에서 전달받은 데이터의 형태나 타입은 알 수 있지만 state 인지 하드코딩인지 등의 판별은 힘들다.
• 때문에 하위컴포넌트의 이벤트로 상위 컴포넌트의 상태를 바꾸기 위해서는 상위 컴포넌트의 상태변경 함수를 하위 컴포넌트에게 전달하여 실행해야 한다.
• 컴포넌트를 여러개로 분리할 수 있다.