[CSS/리액트] 1리액트로 CSS 옮기고 서브페이지 만들기 (9)

목표 > 
9개씩 아이템들 보여주기
( 페이지 클릭 할 시 )

---

참고할 글

[리액트] 페이지 함수 - 매개변수와 인수, Array.from() (tistory.com)

[리액트] 페이지 함수 - 매개변수와 인수, Array.from()

 

https://bang-jh.tistory.com/31

인수(arguments)와 인자(parameter)

 

---

기존 코드

 

Pagination 컴포넌트

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";

function Pagination() {
  return (
    <div className="pages">
      {" "}
      {/* class -> className */}
      <a href="#">
        <FontAwesomeIcon icon={faAngleLeft} />
      </a>{" "}
      {/* <i> 태그 대신 FontAwesomeIcon 사용 */}
      <ol>
        <li onClick={() => {}}>
          <a href="#">1</a>
        </li>
        <li onClick={() => {}}>
          <a href="#">2</a>
        </li>
        <li onClick={() => {}}>
          <a href="#">3</a>
        </li>
      </ol>
      <a href="#">
        <FontAwesomeIcon icon={faAngleRight} />
      </a>{" "}
      {/* <i> 태그 대신 FontAwesomeIcon 사용 */}
    </div>
  );
}

export default Pagination;

Item 컴포넌트 

import axios from "axios";
import { useEffect, useState } from "react";

function ItemContainer() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    axios
      .get("https://kku-git.github.io/nff_product/product.json")
      .then((response) => {
        setItems(response.data);
      })
      .catch(() => {
        console.log("실패함");
      });
  }, []);

  if (items.length === 0) {
    return <p>LOADING...</p>;
  }
  return (
    <div className="item-container">
      {items.map((a, i) => (
        <div key={i} className="item">
          <div className="overlay-wrap">
            <div className="overlay">
              <p>{a.title}</p>
              <p>{a.price}</p>
            </div>
          </div>
          <img
            src={`https://kku-git.github.io/nff_product/fingers/ring${
              i + 1
            }.jpg`}
            alt={`ring ${i + 1}`}
          />
        </div>
      ))}
    </div>
  );
}

export default ItemContainer;

FingerPage 컴포넌트

import Header from "../components/Header";
import LeftSidebar from "../components/LeftSidebar";
import RightSidebar from "../components/RightSidebar";
import SearchOverlay from "../components/SearchOverlay";
import Pagination from "../components/Pagination";
import Footer from "../components/Footer";
import { Link } from "react-router-dom";
import ItemContainer from "../components/Items";

function FingerPage(props) {
  return (
    <div className="wrapper">
      {/* 검색창 */}
      {props.Search === true ? (
        <SearchOverlay setSearch={props.setSearch} />
      ) : null}

      {/* 헤더 */}
      <Header />

      {/* 컨테이너 시작 */}
      <div className="container">
        {/* 왼쪽 aside */}
        <LeftSidebar
          setSearch={props.setSearch}
          setIsShopHovered={props.setIsShopHovered}
          isShopHovered={props.isShopHovered}
          setIsBoardHovered={props.setIsBoardHovered}
          isBoardHovered={props.isBoardHovered}
        />

        {/* 중앙 메인 콘텐츠 */}
        <main>
          <div className="image-container">
            <Link to="/">
              <img
                src="https://kku-git.github.io/nff_product/logo.svg"
                alt="로고"
                className="logo-image"
              />
            </Link>
          </div>
          {/* items */}
          <ItemContainer />
          {/* pages */}
          <Pagination />
          {/* Footer */}
          <Footer />
        </main>

        {/* 우측 aside */}
        <RightSidebar />
      </div>
    </div>
  );
}

export default FingerPage;

---

우선 App.js
수정 & 분석

 

  // 페이지 상태 정의
  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
  const totalPages = 3; // 총 페이지 수 (예시로 3페이지로 설정)
  // 페이지 변경 핸들러
  function handlePageChange(page) {
    setCurrentPage(page); // 페이지를 변경할 때 상태를 업데이트
  }

해당 state 하고 함수 추가해주기

- 여기다가(  App.js ) 정의 해준 이유 >

여기서 페이지 상태를 정의하면 하위 컴포넌트들

(예: FingerPage, Pagination, ItemContainer)에서 그 상태를 쉽게 사용할 수 있음. 

+ 어느 컴포넌트에서든지 페이지 상태를 변경하거나 참조 가능

App.js에서 상태를 관리하고 이를 FingerPage를 통해 하위 컴포넌트에 전달.
이렇게 하면 Pagination이 페이지 번호를 변경하고, 그 변경 사항이 ItemContainer에도 즉시 반영

 

Pagination과 ItemContainer가 같은 페이지 상태를 공유하는 방식 >>>

1. 상태 관리 흐름

const [currentPage, setCurrentPage] = useState(1); // 현재 페이지
const totalPages = 3; // 총 페이지 수 (예시)​

우선, App.js에서 상태(currentPage, handlePageChange)를 정의했죠.
이 상태는 현재 사용자가 보고 있는 페이지 번호를 나타내요.

그리고 이 상태를 FingerPage 컴포넌트에 props로 넘기고 있죠:

<FingerPage
  currentPage={currentPage} 
  totalPages={totalPages}
  onPageChange={handlePageChange}
/>​

 = FingerPage 에 전달된 상태.


2. FingerPage에서 상태 전달

        {/* items */}
          <ItemContainer currentPage={props.currentPage} itemsPerPage={9} />
          {/* pages */}
          <Pagination
            currentPage={props.currentPage}
            totalPages={props.totalPages}
            onPageChange={props.onPageChange}
          />​

FingerPage는 이 props를 받아서 Pagination과 ItemContainer에 다시 전달해요.
즉, Pagination과 ItemContainer는 같은 상태인 currentPage(현재페이지번호)를 참조하고 있어요.

☆★ItemContainer에  itemsPerPage={9}도 추가한 이유 > 


정리
App.js에서 currentPage 상태를 관리하고, 이를 FingerPage에 props로 넘겨요.
FingerPage는 다시 **Pagination과 ItemContainer**에 그 상태를 전달해요.

☆★ Pagination에서 페이지를 변경하면,
handlePageChange가 실행되어 ( 페이지를 클릭하면 onPageChange(페이지 번호)가 실행 됨)
= **onPageChange**는 사실 **handlePageChange**랑 연결
currentPage가 변경돼요.
currentPage가 변경되면 리액트가 자동으로 ItemContainer와 Pagination을 다시 렌더링해서
새로운 페이지 번호에 맞는 데이터를 보여줘요.

즉, 상태가 중앙(App.js)에서 관리되기 때문에,
상태가 변경되면 그 상태를 참조하는 컴포넌트들(Pagination, ItemContainer)이
자동으로 다시 렌더링되는 것.

      <Route
        path="/shop/fingers"
        element={
          <FingerPage
            Search={Search}
            setSearch={setSearch}
            isShopHovered={isShopHovered}
            setIsShopHovered={setIsShopHovered}
            isBoardHovered={isBoardHovered}
            setIsBoardHovered={setIsBoardHovered}
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={handlePageChange}
          />
        }
      />

그리고 FingerPage 컴포넌트에 props 로 전달.

  // 페이지 상태 정의
  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
  const totalPages = 3; // 총 페이지 수 (예시로 3페이지로 설정)
  // 페이지 변경 핸들러
  function handlePageChange(page) {
    setCurrentPage(page); // 페이지를 변경할 때 상태를 업데이트
  }

• currentPage: 현재 페이지 번호를 저장하는 상태입니다. 초기값으로 1을 설정합니다.
• setCurrentPage: currentPage 상태를 업데이트하는 함수입니다. 페이지를 변경할 때 호출됩니다.
• totalPages: 페이지 수를 설정합니다. 이 예제에서는 총 3페이지로 설정했습니다.
  
  
• handlePageChange 함수는 페이지 번호를 인수로 받아,
• setCurrentPage를 호출하여 currentPage 상태를 업데이트합니다.

 

• *handlePageChange(page)**는 페이지 번호를 인수로 받고,
• 그 인수를 사용해 현재 페이지(currentPage)를 변경하는 역할

page라는 값은 어디서 전달되는 걸까? >>

1) handlePageChange(page) 함수는 Pagination 컴포넌트에서 호출
onPageChange(i + 1) 여기서 페이지 번호(i + 1)를 onPageChange에 전달

☆★2) onPageChange 는 handlePageChange 와 연결
이  Pagination 컴포넌트의 onPageChange 는 App.js에서 handlePageChange 함수로 연결됨.
Pagination 에서 onPageChange가 호출되면, handlePageChange가 실행

즉, **onPageChange(i + 1)**가 실행되면, **handlePageChange(i + 1)**가 호출되는 구조. 
이때 **i + 1**은 사용자가 클릭한 페이지 번호를 의미​

부연설명) 
1. onPageChange는 handlePageChange와 연결되어 있어요

먼저, Pagination 컴포넌트에서 onPageChange라는 이름으로 함수를 받는다고 생각해봐요.
그런데 사실 이 함수는 App.js에서 전달된 handlePageChange 함수입니다.
그러니까 onPageChange가 호출되면, 사실은 handlePageChange가 실행된다고 생각하면 돼요.

2. App.js에서 함수 전달

App.js에서 Pagination 컴포넌트에 이렇게 onPageChange를 넘겨줘요:

<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={handlePageChange} // 여기서 onPageChange는 handlePageChange가 됩니다.
 />

여기서 onPageChange={handlePageChange} 부분이 중요한데,
이 코드가 의미하는 것은 "Pagination 컴포넌트에서 onPageChange를 호출할 때,
그건 사실 App.js의 handlePageChange 함수를 실행해줘!" 라는 뜻이에요.

3. Pagination에서 onPageChange 호출

이제 Pagination 컴포넌트로 넘어가서,
버튼을 누르거나 페이지 번호를 클릭하면 onPageChange가 호출되는데,
사실 이건 바로 handlePageChange를 실행하는 거예요!

예를 들어, 페이지 번호를 클릭했을 때:

<li onClick={() => onPageChange(i + 1)}>

이 코드를 보면 onPageChange(i + 1)를 호출하는데,
사실은 handlePageChange(i + 1)가 실행되는 거죠. i + 1은 클릭된 페이지 번호입니다.

4. handlePageChange가 실행되면?

handlePageChange가 실행되면, App.js에 있는 setCurrentPage가 실행돼서 페이지 상태를 바꿔요:

function handlePageChange(page) {
  setCurrentPage(page); // 클릭한 페이지 번호로 페이지 상태가 변경돼요!
}

여기서 page는 클릭한 페이지 번호예요.

<li onClick={() => onPageChange(i + 1)}>를 클릭하면, 
**i + 1**이 onPageChange 함수의 인수로 전달돼요. 
그 **onPageChange**는 **handlePageChange**와 연결되어 있기 때문에, 
결국 i + 1이 handlePageChange 함수의 page 인수로 들어가는 것.

즉, **i + 1**이 page 값으로 들어가서 
**setCurrentPage(page)**가 실행되고, 
**currentPage**가 **i + 1**로 변경된다.

간단히 정리하면:
페이지 번호를 클릭하면 **onClick={() => onPageChange(i + 1)}**가 실행됨.
**onPageChange(i + 1)**가 실행되면, **handlePageChange(i + 1)**가 호출됨.
handlePageChange 함수 안에서 **setCurrentPage(i + 1)**가 실행돼서, 
현재 페이지(currentPage)가 i + 1로 변경.

요약

• **Pagination에서 onPageChange**를 호출하면, 사실 **handlePageChange**를 실행하는 거예요.
• 그리고 그 안에서 **setCurrentPage**가 실행돼서 현재 페이지를 바꿔줘요.
• 그 결과로, 클릭한 페이지 번호로 화면에 보여지는 내용이 바뀌게 됩니다.

3) handlePageChange에서 페이지 상태 업데이트
handlePageChange는 전달받은 page 값을 사용해서 currentPage를 변경

---

좀 더 쉽게 이해하기 >>

1) handlePageChange 함수
함수의 역할:
handlePageChange라는 함수는 페이지 번호를 받아서 현재 페이지를 바꿔주는 역할을 해요.

함수가 받는 값:
이 함수는 page라는 값을 받는데, 이 값이 바로 새로운 페이지 번호예요.

2) 페이지 번호는 어디서 오는 걸까?
버튼 클릭 시:
Pagination 컴포넌트에서 페이지 번호를 클릭하면 handlePageChange 함수가 호출돼요.
이때, 버튼을 클릭한 결과로 새로운 페이지 번호가 handlePageChange에 전달돼요
.

Pagination 컴포넌트의 코드 분석
=  버튼을 클릭하면 (App.js에 있는) handlePageChange 함수가 호출돼서 페이지 번호를 변경하게 됨​​

---

Pagination 컴포넌트에서 handlePageChange 함수가 어떻게 호출되는지 살펴보기 >>

주요 부분 설명 >

------------------------------------------------------------------------------

이전 페이지 버튼:
 	   <a
        href="#"
        onClick={(e) => {
          e.preventDefault();
          if (currentPage > 1) {
            onPageChange(currentPage - 1);
          }
        }}
      >
        <FontAwesomeIcon icon={faAngleLeft} />
      </a>
      
이 부분에서 onClick 핸들러가 버튼 클릭 시 호출됩니다.
클릭 시, currentPage - 1을 인수로 onPageChange 함수가 호출됩니다.
onPageChange(currentPage - 1)은 현재 페이지보다 1 페이지 이전으로 변경해요.

------------------------------------------------------------------------------

페이지 번호 목록:
페이지 번호 목록을 <ol> 리스트로 렌더링합니다.
각 페이지 번호를 클릭하면, onClick={() => onPageChange(i + 1)} 부분에서
onPageChange 함수가 호출됩니다.
i + 1은 현재 클릭된 페이지 번호를 의미합니다.

------------------------------------------------------------------------------

다음 페이지 버튼:
<a href="#" onClick={(e) => { ... }}> 부분에서 onClick 핸들러가 버튼 클릭 시 호출됩니다.
클릭 시, currentPage + 1을 인수로 onPageChange 함수가 호출됩니다.
onPageChange(currentPage + 1)은 현재 페이지보다 1 페이지 이후로 변경해요.

예시로 설명하기:
여러분이 3페이지로 가고 싶어서 버튼을 클릭해요.
이 버튼 클릭은 handlePageChange(3)이라는 함수 호출로 이어져요.
그래서 함수 안에 page라는 값으로 3이 들어가고,
이 값을 이용해 setCurrentPage를 호출해 현재 페이지를 3으로 변경해요.

3) 전체 흐름
사용자가 버튼 클릭:사용자가 페이지 버튼을 클릭하거나 <</>> 버튼을 클릭해요.
페이지 번호 전달:
버튼 클릭 시, handlePageChange 함수가 호출되고,
이 함수는 클릭된 페이지 번호를 받아요.

예를 들어, 3페이지를 클릭하면 handlePageChange(3)이 호출돼요.

페이지 상태 업데이트:
함수는 페이지 번호를 받아서 현재 페이지 상태를 업데이트해요.
이렇게 되면, 화면에 현재 페이지 3이 표시돼요.

---

버튼을 누르면 onPageChange() 여기 소괄호 안에 있던 인수가 page 의 값으로 전달하는 지 >>

버튼을 누르면 onPageChange 함수가 호출되고,
이 함수에 전달되는 값이 page의 값으로 전달됨.

onPageChange 함수:
Pagination 컴포넌트에서 onPageChange는 부모 컴포넌트인 App에서 전달된 함수입니다.
App에서 handlePageChange라는 함수가 Pagination에 onPageChange라는 이름으로 전달되죠.

버튼 클릭 시 동작:
이전 페이지 버튼:

<a
  href="#"
  onClick={(e) => {
    e.preventDefault(); // 링크 클릭 시 페이지 리프레시 방지
    if (currentPage > 1) {
      onPageChange(currentPage - 1); // 현재 페이지보다 1 감소한 페이지로 변경
    }
  }}
>
  <FontAwesomeIcon icon={faAngleLeft} />
</a>​

 

버튼을 클릭하면, onPageChange(currentPage - 1)이 호출됩니다.

예를 들어, 현재 페이지가 2라면, onPageChange(1)이 호출됩니다.

 페이지 번호 클릭:

<li
  key={i}
  onClick={() => onPageChange(i + 1)} // 클릭된 페이지 번호를 인수로 전달
  style={{
    cursor: "pointer",
    fontWeight: currentPage === i + 1 ? "bold" : "normal",
  }}
>
  <a href="#">{i + 1}</a>
</li>​

페이지 번호를 클릭하면 onPageChange(i + 1)이 호출됩니다.

예를 들어, 2 페이지 번호를 클릭하면, onPageChange(2)이 호출됩니다.

다음 페이지 버튼:

<a
  href="#"
  onClick={(e) => {
    e.preventDefault(); // 링크 클릭 시 페이지 리프레시 방지
    if (currentPage < totalPages) {
      onPageChange(currentPage + 1); // 현재 페이지보다 1 증가한 페이지로 변경
    }
  }}
>
  <FontAwesomeIcon icon={faAngleRight} />
</a>​

버튼을 클릭하면 onPageChange(currentPage + 1)이 호출됩니다.
예를 들어, 현재 페이지가 2라면, onPageChange(3)이 호출됩니다.

요약
버튼 클릭 시:
버튼 클릭 시 onPageChange 함수가 호출되고,
이 함수는 페이지 번호를 인수로 받습니다.

값 전달:
이 페이지 번호가 handlePageChange 함수로 전달되어 현재 페이지 상태가 업데이트됩니다.

---

FingerPage 컴포넌트 분석

function FingerPage({ currentPage, totalPages, onPageChange }) {
  return (
    <div>
      {/* 아이템 목록을 현재 페이지에 맞게 표시 */}
      <ItemContainer currentPage={currentPage} itemsPerPage={9} />
      
      {/* 페이지네이션 표시 */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={onPageChange}
      />
    </div>
  );
}

FingerPage는 받은 props들을 사용해서 하위 컴포넌트에 또 전달.

여기서 ItemContainer와 Pagination이 props를 통해 페이지 정보를 받습니다.

• ItemContainer는 currentPage와 itemsPerPage를 받아서 아이템을 그려줍니다.
• Pagination은 현재 페이지와 총 페이지 수를 받아서 페이지 버튼을 렌더링하고,
• 페이지를 변경할 때 onPageChange를 호출합니다.

itemPerPage 의 쓰임 >>

**itemsPerPage**는 한 페이지에 몇 개의 아이템(상품)을 보여줄지를 결정하는 값

= 한 페이지에 9개의 아이템을 보여주고 싶으니까, **itemsPerPage={9}**로 설정해 준 것.

 

**FingerPage**에서 **ItemContainer**에 props로 넘겨주는 이유는,

ItemContainer 컴포넌트가 몇 개의 아이템을 한 번에 보여줄지를 알아야 하기 때문.

 

**ItemContainer**는 itemsPerPage 값을 받아서 한 번에 보여줄 상품의 개수를 계산.

FingerPage가 몇 개를 보여줘야 할지에 대한 정보를 ItemContainer에게 넘겨주는 역할

 

예시:

1. FingerPage는 마치 상품 가게의 매니저라고 생각할 수 있어요.
2. 이 매니저는 하루에 몇 개의 상품을 진열할지 결정하는 사람이에요.
3. ItemContainer는 상품을 진열하는 직원이에요.
4. 직원은 매니저가 "하루에 9개의 상품만 진열해!"라고 말해줘야, 몇 개를 진열할지 알 수 있어요.
5. FingerPage에서 **itemsPerPage={9}**로 설정해주면,
   이게 "한 페이지에 9개의 상품을 보여줘!"라는 의미가 돼요.
6. 그러니까 FingerPage가 상품을 몇 개 보여줄지를 결정하고 ItemContainer에 그 정보를 넘겨주는 거예요.

다시 코드로 설명하자면:

• FingerPage는 한 페이지에 몇 개의 상품을 보여줄지 (여기선 9개) 결정하고,
• 그 값을 ItemContainer로 넘겨요.
• 이게 바로 itemsPerPage={9}이에요.
• ItemContainer는 그 값을 받아서 9개씩 상품을 잘라서 화면에 보여줘요.

---

currentPage 이런건 App.js 에서 받아온 건데, itemsPerPage 는 App.js 에서 받아온게 아님.
- props의 쓰임에 대해서.

 

currentPage는 App.js에서 받아온 것이고, itemsPerPage는 FingerPage에서 직접 정의한 값

 

• App.js는 currentPage를 관리하는 주체이기 때문에, 그 값을 FingerPage에게 전달해요.
• 반면에 itemsPerPage는 FingerPage에서 직접 정의된 값이기 때문에, 굳이 App.js로부터 받을 필요가 없어요. FingerPage에서 정한 값을 ItemContainer로 전달해주면 되는 거죠.
• currentPage는 App.js에서 생성하고, FingerPage로 전달해서 사용.
• itemsPerPage는 FingerPage에서 직접 설정해서 ItemContainer로 전달.

---

itemsPerPage={9} 를 FingerPage 에서 useState 를 사용하지 않고 바로 정의해서 컴포넌트 props 로 보낼 수 있는 지

 

**itemsPerPage={9}**처럼 고정된 값이라면, 상태 관리가 필요 없어요.

그냥 9라는 숫자를 직접 props로 넘기면 돼요

 

1. props란?

props는 컴포넌트 간에 데이터를 전달할 때 사용하는 방법이에요.

부모 컴포넌트가 자식 컴포넌트에게 어떤 값을 줄 때 props를 통해 넘겨줘요.

2. **itemsPerPage={9}**는 무슨 의미일까?

• **itemsPerPage={9}**라고 쓰면,
• itemsPerPage라는 이름의 props로 9라는 숫자를 자식 컴포넌트에 전달하는 거예요.
• 마치 부모가 자식에게 9라는 숫자 값을 줄게라고 말하는 거랑 비슷해요.

3. 왜 useState 없이 보내는 걸까?

• **useState**는 동적인 상태를 관리할 때 사용해요.
• 예를 들어, 페이지 번호가 바뀌거나 어떤 값이 변경될 때 상태가 바뀌는 것을 관리하는 거죠.
• 하지만 **itemsPerPage={9}**는 고정된 값이에요.

즉, 한 페이지에 항상 9개씩 아이템을 보여줄 거라면 그 값을 바꿀 필요가 없으니

useState로 상태를 관리할 필요가 없어요.

4. props로 바로 값을 보내는 것의 예시

<FingerPage itemsPerPage={9} />

• 여기서 **FingerPage**라는 컴포넌트에 itemsPerPage라는 이름의 props로 9라는 값을 넘긴 거예요.

요약

• **itemsPerPage={9}**는 부모 컴포넌트가 자식 컴포넌트에 9라는 값을 props로 넘기는 방식이에요.
• **useState**는 값을 변경해야 할 때 쓰는 거지만,
• **고정된 값(예: itemsPerPage=9)**은 그냥 props로 바로 넘겨도 돼요.

---

itemsPerPage를 굳이 App.js에 만들지 않고, FingerPage에서 정의 한 이유

App.js에 넣지 않은 이유는, 다른 페이지들이나 컴포넌트가 이 값을 필요로 하지 않기 때문

몇 개의 상품을 한 페이지에 보여줄지는 FingerPage만 알아도 되는 정보. 

 

근데 추후에 다른 페이지 (ex: HairPage ) 생성할 경우, App.js 에 넣어준다.

 

1) App.js에서 itemsPerPage를 정의하고, 여러 페이지에 전달

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const totalPages = 3;
  const itemsPerPage = 9; // 여기서 공통적으로 사용할 itemsPerPage를 정의해요.

  function handlePageChange(page) {
    setCurrentPage(page);
  }

  return (
    <Routes>
      <Route
        path="/shop/fingers"
        element={
          <FingerPage
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={handlePageChange}
            itemsPerPage={itemsPerPage} // itemsPerPage를 FingerPage로 전달
          />
        }
      />
      <Route
        path="/shop/neck"
        element={
          <NeckPage
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={handlePageChange}
            itemsPerPage={itemsPerPage} // NeckPage에도 같은 itemsPerPage를 전달
          />
        }
      />
    </Routes>
  );
}

 

2) FingerPage나 NeckPage 같은 페이지에서 **props로 받은 itemsPerPage**를 사용

function FingerPage(props) {
  return (
    <div>
      {/* 다른 컴포넌트들과 함께 */}
      <ItemContainer
        currentPage={props.currentPage}
        itemsPerPage={props.itemsPerPage} // props로 받은 itemsPerPage를 사용
      />
      <Pagination
        currentPage={props.currentPage}
        totalPages={props.totalPages}
        onPageChange={props.onPageChange}
      />
    </div>
  );
}

export default FingerPage;

 

• 중복을 피함: 여러 페이지에서 itemsPerPage=9를 따로 설정하는 대신, 한 곳에서만 관리하면 실수를 줄일 수 있다.
• 유연성: 나중에 9개가 아니라 15개로 바꾸고 싶다면, App.js에서 한 번만 바꾸면 모든 페이지에 반영된다.

---