본문 바로가기
> IT 노트/활용

[리액트] 페이지 함수 만들기

by 자몽주스 2024. 9. 8.
728x90
 페이지 함수 만들기
- 화살표에 기능 넣기
Pages.js - Pages 컴포넌트
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";

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

export default Pages;

페이지 기능 넣기 전 코드

부모 컴포넌트 페이지 (App.js) 에다가 useState 사용해서 페이지 버튼 만들어주기

1) 현재 페이지를 추적하기 위해 currentPage 상태를 정의

2) 페이지가 변경될 때 호출되어 currentPage 상태를 업데이트

  // 페이지 상태 정의
  const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태
  const totalPages = 3; // 총 페이지 수 (예시로 3페이지로 설정)

useState 사용해서,

currentPage는 현재 페이지를 나타내기

setCurrentPage로 상태 업데이트

 

  // 페이지 변경 핸들러
  function handlePageChange(page) {
    setCurrentPage(page); // 페이지를 변경할 때 상태를 업데이트
  }

페이지 변경 함수 써줌. ( 페이지 변경 시 호출 )

- currentPage 상태를 업데이트

 

Pagination 컴포넌트에 currentPage, totalPages, handlePageChange를 props로 전달해야함.

 

useState를 사용하여 currentPage와 setCurrentPage를 설정하고, totalPages를 설정한 이유

currentPage

: 현재 선택된 페이지를 나타내는 상태.

초기값으로 1을 설정하여 페이지 컴포넌트가 처음 렌더링될 때 기본 페이지가 1로 설정

setCurrentPage

: 이 함수는 currentPage 상태를 업데이트하는 함수입니다.

페이지 변경 시 호출되어 현재 페이지를 새 페이지로 업데이트

totalPages

: 총 페이지 수.

(실제 애플리케이션에서는 동적으로 총 페이지 수를 계산하거나 API로부터 데이터를 받아올 수 있습니다)

페이지 컴포넌트에서 총 페이지 수가 필요합니다.
totalPages를 사용하여 페이지 번호를 생성.
총 페이지 수가 정해지면, 페이지의 이전 및 다음 버튼을 활성화하거나 비활성화하는 등의 로직을 구현 가능.
페이지 번호를 생성하고 페이지 버튼의 활성화/비활성화 상태를 결정하는 데 사용.
(실제 애플리케이션에서는 동적으로 총 페이지 수를 계산하거나 API로부터 데이터를 받아올 수 있습니다)
의 설명 >

실제 애플리케이션에서는 총 페이지 수(totalPages)를 하드코딩하지 않고

동적으로 계산하거나 외부 API로부터 받아오는 경우가 많습니다.

이는 데이터의 양이 변동할 수 있기 때문에 유동적인 페이지네이션을 구현하기 위함입니다.

여기에는 다음과 같은 방법들이 있습니다:

1. API로부터 데이터 받아오기

대부분의 애플리케이션은 서버에서 데이터를 받아와야 하기 때문에,

총 페이지 수를 서버에서 제공하는 경우가 많습니다.

이 경우, API 호출 후 응답으로부터 총 페이지 수를 추출하여 상태를 업데이트합니다.

 

예시:

  1. API 요청 및 응답 처리:
import React, { useState, useEffect } from 'react';
import Pagination from './Pagination';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [data, setData] = useState([]);

  // 페이지 변경 핸들러
  function handlePageChange(page) {
    setCurrentPage(page);
  }

  useEffect(() => {
    // 데이터 가져오기
    async function fetchData() {
      const response = await fetch(`https://api.example.com/items?page=${currentPage}`);
      const result = await response.json();
      setData(result.items);
      setTotalPages(result.totalPages); // 응답에서 총 페이지 수 설정
    }

    fetchData();
  }, [currentPage]); // currentPage가 변경될 때마다 데이터를 새로 가져옴

  return (
    <div className="App">
      {/* Pagination 컴포넌트에 props 전달 */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
      {/* 데이터 표시 */}
      <div className="item-container">
        {data.map(item => (
          <div key={item.id} className="item">
            <img src={item.image} alt={item.title} />
            <p>{item.title}</p>
            <p>{item.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

API 응답 예시:

{
  "items": [
    {"id": 1, "title": "Item 1", "price": "$10", "image": "/path/to/image1.jpg"},
    {"id": 2, "title": "Item 2", "price": "$20", "image": "/path/to/image2.jpg"}
  ],
  "totalPages": 10
}

 

API를 사용하는 첫 번째 방법에서도 페이지당 표시할 항목 수를 설정할 수 있습니다.

페이지당 표시할 항목 수는 클라이언트와 서버 간의 통신에서 흔히 사용하는 패턴 중 하나입니다.

클라이언트가 서버에 요청할 때, 쿼리 파라미터를 사용하여

페이지 번호와 페이지당 항목 수를 함께 서버에 전달합니다.

페이지당 표시할 항목 수 설정 방법

  1. itemsPerPage 설정: 클라이언트에서 페이지당 몇 개의 항목을 표시할지를 정합니다. 예를 들어, itemsPerPage 값을 10으로 설정하면, 한 페이지에 10개의 항목을 표시합니다.
  2. API 요청 시 쿼리 파라미터로 전달: currentPage와 함께 itemsPerPage를 쿼리 파라미터로 서버에 전달하여 요청합니다. 서버는 이 값에 따라 해당 페이지의 데이터를 응답으로 보냅니다.
  3. 총 페이지 수 계산: 서버가 총 항목 수(totalItems)를 응답으로 제공하면, 클라이언트는 이를 기반으로 총 페이지 수를 계산합니다.

코드 예시 (첫 번째 방법)

import React, { useState, useEffect } from 'react';
import Pagination from './Pagination';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [data, setData] = useState([]);
  const itemsPerPage = 10; // 페이지당 표시할 항목 수 설정

  // 페이지 변경 핸들러
  function handlePageChange(page) {
    setCurrentPage(page);
  }

  useEffect(() => {
    // 데이터 가져오기
    async function fetchData() {
      const response = await fetch(
        `https://api.example.com/items?page=${currentPage}&limit=${itemsPerPage}`
      ); // currentPage와 itemsPerPage를 쿼리로 전달
      const result = await response.json();
      setData(result.items);

      // 서버에서 총 항목 수를 제공하면 이를 기반으로 총 페이지 수 계산
      const totalItems = result.totalItems; 
      setTotalPages(Math.ceil(totalItems / itemsPerPage)); // 총 페이지 수 계산
    }

    fetchData();
  }, [currentPage, itemsPerPage]); // currentPage나 itemsPerPage가 변경될 때마다 데이터 재요청

  return (
    <div className="App">
      {/* Pagination 컴포넌트에 props 전달 */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />

      {/* 데이터 표시 */}
      <div className="item-container">
        {data.map(item => (
          <div key={item.id} className="item">
            <img src={item.image} alt={item.title} />
            <p>{item.title}</p>
            <p>{item.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

 

주요 포인트

  • itemsPerPage는 한 페이지에 표시할 항목 수를 정의합니다.
  • 이 값은 클라이언트에서 설정할 수 있습니다.
  • currentPage와 itemsPerPage를 쿼리 파라미터로 API 요청 시 서버에 전달합니다.
  • 서버는 이 값들을 사용하여 해당 페이지의 데이터와 총 항목 수를 응답합니다.
  • 클라이언트는 서버에서 받은 totalItems로 totalPages를 동적으로 계산하고,
  • 이를 페이지네이션에 반영합니다.

2. 총 페이지 수 계산

만약 서버에서 총 페이지 수를 제공하지 않는다면,

페이지에 필요한 총 페이지 수를 클라이언트에서 계산할 수 있습니다.

예를 들어, 데이터의 총 개수와 페이지당 항목 수를 알고 있을 때 총 페이지 수를 계산할 수 있습니다.

 

예시:

  1. 데이터와 페이지당 항목 수로 총 페이지 수 계산:
import React, { useState, useEffect } from 'react';
import Pagination from './Pagination';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [data, setData] = useState([]);
  const itemsPerPage = 10; // 페이지당 항목 수

  // 페이지 변경 핸들러
  function handlePageChange(page) {
    setCurrentPage(page);
  }

  useEffect(() => {
    // 데이터 가져오기
    async function fetchData() {
      const response = await fetch(`https://api.example.com/items?page=${currentPage}&limit=${itemsPerPage}`);
      const result = await response.json();
      setData(result.items);
      
      // 총 페이지 수 계산
      const totalItems = result.totalItems; // 서버에서 총 항목 수 제공
      setTotalPages(Math.ceil(totalItems / itemsPerPage)); // 총 페이지 수 계산
    }

    fetchData();
  }, [currentPage]); // currentPage가 변경될 때마다 데이터를 새로 가져옴

  return (
    <div className="App">
      {/* Pagination 컴포넌트에 props 전달 */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
      {/* 데이터 표시 */}
      <div className="item-container">
        {data.map(item => (
          <div key={item.id} className="item">
            <img src={item.image} alt={item.title} />
            <p>{item.title}</p>
            <p>{item.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

페이지당 항목 수(itemsPerPage)와 데이터의 총 개수를 사용하여 총 페이지 수를 동적으로 계산.

하드코딩된 값은 페이지당 항목 수(itemsPerPage)일 뿐이며,

데이터의 총 개수는 서버에서 가져온 정보입니다.

  1. 페이지당 항목 수 설정:
    • const itemsPerPage = 10;
    • 페이지당 표시할 항목 수를 설정합니다.
    • 이 값은 페이지당 몇 개의 항목이 표시될지를 결정합니다.
  2. 총 페이지 수 계산:
    • 서버에서 총 항목 수를 받아온 후, 총 페이지 수를 계산합니다.
    • 예를 들어, 서버가 총 항목 수(totalItems)를 제공하면, totalPages를 다음과 같이 계산합니다:
    • Math.ceil을 사용하여 소수점을 올림 처리하여 페이지 수를 정수로 만듭니다.
setTotalPages(Math.ceil(totalItems / itemsPerPage));

**페이지당 항목 수 (itemsPerPage)**는 하드코딩된 값

요약

  • API로부터 데이터 받아오기: 서버에서 응답으로 총 페이지 수를 제공받아 totalPages를 설정합니다.
  • 총 페이지 수 계산: 서버에서 제공하는 총 항목 수와 페이지당 항목 수를 기반으로 총 페이지 수를 계산합니다.

이렇게 하면 데이터가 동적으로 변화해도 페이지가 유동적으로 작동할 수 있습니다.

장단점

각각의 방법이 장단점이 있는데, 이를 바탕으로 어떤 상황에서 어느 방법이 더 적합할지 알아볼 수 있습니다.

1. API를 사용하여 동적으로 페이지 수 계산 (첫 번째 방법)

장점:

  • 동적 데이터 처리: 서버에서 데이터를 가져와 동적으로 페이지네이션을 처리하므로,
  • 대규모 데이터를 유연하게 처리할 수 있습니다.
  • 실시간 업데이트: 서버의 데이터가 변경될 때마다 새로운 페이지네이션을 바로 반영할 수 있습니다.
  • 사용자 정의 가능: itemsPerPage를 동적으로 설정하거나 변경할 수 있어서,
  • 사용자가 페이지당 몇 개의 항목을 보고 싶어하는지 선택할 수 있습니다.

단점:

  • 복잡성 증가: 데이터를 서버에서 받아와야 하기 때문에,
  • API 호출, 데이터 처리, 에러 핸들링 등을 추가로 구현해야 합니다.
  • API 의존성: 서버가 항상 가동 중이어야 하고,
  • API 호출이 성공해야만 페이지네이션이 정상적으로 동작합니다.
  • 따라서 네트워크 상태에 따라 성능이 달라질 수 있습니다.

사용이 적합한 경우:

  • 데이터가 서버에서 동적으로 변경되거나, 페이지 수가 유동적인 경우.
  • 대규모 데이터나 외부 API와의 연동이 필요한 경우.
  • 실시간 데이터를 사용하는 경우.

2. 정적 또는 고정된 데이터로 페이지 수 설정 (두 번째 방법)

장점:

  • 간단한 구현: 서버에 API를 요청하는 복잡한 로직 없이 클라이언트에서 모든 데이터를 처리할 수 있기 때문에
  • 구현이 간단합니다.
  • 빠른 응답 속도: 서버 요청이 필요 없으므로 클라이언트 측에서 빠르게 페이지를 렌더링할 수 있습니다.
  • 로컬에서 작업 가능: 서버와의 통신이 필요 없으므로, 데이터를 미리 알고 있거나 고정된 데이터일 경우 유용합니다.

단점:

  • 확장성 부족: 대규모 데이터에 적합하지 않으며, 데이터가 동적으로 변경되지 않기 때문에,
  • 많은 데이터를 로드하거나 업데이트할 때 비효율적입니다.
  • 유연성 부족: 정해진 페이지 수를 하드코딩하기 때문에,
  • 사용자가 동적으로 페이지 수를 선택할 수 있는 기능을 추가하기 어렵습니다.

사용이 적합한 경우:

  • 데이터가 많지 않고, 고정된 데이터 또는 정적 데이터를 다루는 경우.
  • 테스트 용도나 초기 개발 단계에서 간단하게 페이지네이션을 구현할 때.
  • API 없이 페이지네이션 기능만 빠르게 구현해야 할 때.

결론: 어떤 방법이 더 수월할까?

  • **첫 번째 방법 (API 연동, 동적 페이지네이션)**이 더 유연하고 실시간 데이터를 다루는 애플리케이션에 적합합니다. 특히 대규모 데이터나 외부 서버와의 연동이 필요할 때, 이 방법이 더 유용합니다.
  • 다만, 추가적인 API 요청, 데이터 처리 로직 등이 복잡할 수 있습니다.
  • **두 번째 방법 (정적 데이터 사용)**은 단순하고 빠르게 구현할 수 있으며,
  • 데이터를 미리 알고 있는 경우나 작은 프로젝트에서는 더 수월할 수 있습니다.
  • 하지만, 대규모 데이터나 실시간 데이터 처리에는 적합하지 않습니다.
9개씩 아이템들이 보여지게 하고싶은데
깃에 데이터들이 있으면 어떤게 좋은 방법? 

 

1. Git에서 데이터를 가져와 클라이언트 측에서 처리

  • 데이터를 Git에 저장하고, 이를 클라이언트 측에서 가져와 페이지네이션을 구현할 수 있습니다.
  • 데이터를 JSON 형식으로 저장해두고, 클라이언트에서 JSON 파일을 불러와 페이지네이션을 적용하는 방식입니다.
  • 이 방법은 API 서버 없이 데이터를 처리할 수 있으며, 작은 프로젝트나 테스트 단계에서 유용합니다.

장점:

  • 간단하게 데이터를 로드하고 페이지네이션 처리 가능.
  • Git에 저장된 데이터를 쉽게 버전 관리할 수 있음.

단점:

  • 데이터 변경이 자주 발생한다면, 데이터를 업데이트할 때마다 Git에 커밋을 해야 하므로 번거로울 수 있음.
  • 데이터가 클라이언트 측으로 모두 로드되기 때문에 데이터 양이 많으면 성능 이슈가 생길 수 있음.

2. GitHub Pages와 같은 정적 웹사이트에서 데이터를 서빙

  • GitHub Pages를 이용해 데이터를 JSON이나 API 형식으로 배포한 후,
  • 클라이언트에서 해당 URL로 데이터를 불러오는 방법입니다.
  • 데이터를 9개씩 불러와 한 페이지에 표시하고,
  • 나머지 데이터를 필요할 때 로드하는 방식으로 구현할 수 있습니다.

장점:

  • 서버를 별도로 운영할 필요 없이 GitHub Pages와 같은 플랫폼을 통해 정적 데이터를 서빙할 수 있음.
  • 클라이언트에서 필요한 만큼의 데이터만 불러올 수 있기 때문에 성능 최적화가 가능.

단점:

  • GitHub Pages나 정적 사이트 배포가 실시간 데이터를 제공하기 어려울 수 있음.

예시 코드 (9개씩 페이지네이션):

import React, { useState } from 'react';
import data from './data.json'; // 깃에서 가져온 데이터를 import한다고 가정

const ITEMS_PER_PAGE = 9;

function PaginationExample() {
  const [currentPage, setCurrentPage] = useState(1);

  // 페이지에 해당하는 데이터를 계산
  const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
  const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  const totalPages = Math.ceil(data.length / ITEMS_PER_PAGE);

  // 페이지 변경 함수
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  return (
    <div>
      <ul>
        {currentItems.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
      <Pagination 
        currentPage={currentPage} 
        totalPages={totalPages} 
        onPageChange={handlePageChange}
      />
    </div>
  );
}

export default PaginationExample;

결론:

Git에 데이터를 저장하고 클라이언트에서 가져오는 방식은 작은 규모의 데이터에 적합하며,

한 페이지에 9개씩 아이템을 표시할 수 있습니다.

데이터가 많아지면 정적 사이트에서 데이터를 제공하는 방법도 고려해 볼 수 있습니다.

 

*GitHub Pages를 이용해 데이터를 JSON이나 API 형식으로 배포한 후* 의 의미

JSON 파일을 마치 API에서 데이터를 요청하는 것처럼 정적 파일로 제공하여 사용할 수 있다는 의미입니다.

GitHub Pages는 주로 정적 사이트를 배포하는 데 사용되지만, JSON 파일을 정적으로 제공하고,

이를 클라이언트에서 가져와 API처럼 활용할 수 있습니다.

1. GitHub Pages에서 JSON 데이터를 제공하는 방법

  • JSON 파일을 저장소에 업로드한 후, GitHub Pages를 통해 해당 JSON 파일을 정적으로 서빙하면 됩니다.
  • 클라이언트에서 해당 JSON 파일을 HTTP 요청을 통해 불러와 데이터를 사용하게 됩니다.

2. 예시

Step 1: GitHub에 JSON 파일 추가

  • GitHub 저장소에 JSON 파일을 추가합니다. 예를 들어, data.json이라는 파일을 추가합니다.
  • 예시 JSON 데이터 (data.json):
[
  { "id": 1, "title": "Item 1" },
  { "id": 2, "title": "Item 2" },
  { "id": 3, "title": "Item 3" },
  ...
  { "id": 100, "title": "Item 100" }
]

Step 2: GitHub Pages 활성화

  • 해당 GitHub 저장소의 Settings로 가서 GitHub Pages 항목을 찾습니다.
  • Source에서 main 브랜치 또는 원하는 브랜치를 선택하여 페이지를 배포합니다.

Step 3: 배포된 JSON 파일에 접근

예를 들어:

https://username.github.io/my-repo/data.json

Step 4: 클라이언트에서 JSON 데이터를 가져오는 코드

  • React나 다른 JavaScript 라이브러리에서 fetch API를 사용하여 JSON 데이터를 가져와 사용할 수 있습니다.
import React, { useState, useEffect } from 'react';

function PaginationExample() {
  const [data, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const ITEMS_PER_PAGE = 9;

  // 데이터 불러오기
  useEffect(() => {
    fetch('https://username.github.io/my-repo/data.json')  // GitHub Pages에서 JSON 데이터 가져옴
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  // 페이지에 해당하는 데이터를 계산
  const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
  const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  const totalPages = Math.ceil(data.length / ITEMS_PER_PAGE);

  // 페이지 변경 함수
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  return (
    <div>
      <ul>
        {currentItems.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
      <Pagination 
        currentPage={currentPage} 
        totalPages={totalPages} 
        onPageChange={handlePageChange}
      />
    </div>
  );
}

export default PaginationExample;

3. API 형식으로 배포하는 장점

  • 서버 없이도 데이터를 제공할 수 있습니다.
  • JSON 데이터를 정적으로 배포하므로 성능이 매우 빠릅니다.
  • 배포된 JSON 파일을 다른 프로젝트에서도 API처럼 사용할 수 있습니다.

이 방식으로 하면 GitHub Pages를 통해 데이터를 API처럼 사용할 수 있게 되고,

서버를 직접 운영할 필요 없이 데이터를 불러와 클라이언트 측에서 페이지네이션 등을 구현할 수 있습니다.

728x90
저작자표시 비영리 변경금지

'> IT 노트 > 활용' 카테고리의 다른 글

[리액트] 페이지 함수 - 매개변수와 인수, Array.from()  (0) 2024.09.11
[리액트] Font Awesome 라이브러리 사용하기  (0) 2024.09.07
[CSS] Font Awesome 같은 아이콘 라이브러리 사용 방법  (1) 2024.09.06
[CSS] 스크롤 바 꾸미기  (0) 2024.08.20
[CSS] aisde 2개 페이지 만들기  (0) 2024.07.30

관련글

티스토리툴바