React 페이지네이션과 검색 기능 연동하기: 예시 코드로 알아보기

React 애플리케이션에서 페이지네이션과 검색 기능을 연동하는 방법을 알아보겠습니다. 이를 통해 사용자가 검색 결과를 페이지별로 탐색할 수 있게 됩니다.

1. 예시 코드 소개

우선 간단한 이미지 관리 애플리케이션을 가정합니다. 이 애플리케이션에는 이미지 목록이 있고, 사용자는 페이지네이션을 통해 이미지를 탐색할 수 있습니다. 또한 사용자는 검색 기능을 사용하여 이미지를 필터링할 수 있습니다.

2. 예시 코드 구현

다음은 React 컴포넌트에서 페이지네이션과 검색 기능을 연동하는 예시 코드입니다.

javascript
Copy code
import React, { useState, useEffect } from "react";
import Pagination from "./Pagination";
import ImageList from "./ImageList";

const ImageManagement = () => {
  // 이미지 목록과 페이지네이션 관련 상태
  const [images, setImages] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [imagesPerPage] = useState(10);

  // 검색 관련 상태
  const [searchInput, setSearchInput] = useState("");
  const [filteredImages, setFilteredImages] = useState([]);

  // 전체 이미지 목록 초기화 (예시용 더미 데이터)
  useEffect(() => {
    // imagesDummy.data는 예시용 이미지 목록 데이터입니다.
    setImages(imagesDummy.data);
  }, []);

  // 검색 기능 구현
  const handleSearch = (searchValue) => {
    setSearchInput(searchValue);
    const filteredData = images.filter((image) =>
      image.title.toLowerCase().includes(searchValue.toLowerCase())
    );
    setFilteredImages(filteredData);
    setCurrentPage(1); // 검색 시 페이지를 1로 초기화
  };

  // 현재 페이지에 해당하는 이미지 목록 가져오기
  const indexOfLastImage = currentPage * imagesPerPage;
  const indexOfFirstImage = indexOfLastImage - imagesPerPage;
  const currentImages = searchInput ? filteredImages : images.slice(indexOfFirstImage, indexOfLastImage);

  // 페이지 변경 시 처리
  const paginate = (pageNumber) => setCurrentPage(pageNumber);

  return (
    <div>
      <h1>이미지 관리</h1>
      {/* 검색 폼 */}
      <input type="text" onChange={(e) => handleSearch(e.target.value)} placeholder="이미지 검색..." />
      {/* 이미지 목록 */}
      <ImageList images={currentImages} />
      {/* 페이지네이션 */}
      <Pagination
        imagesPerPage={imagesPerPage}
        totalImages={searchInput ? filteredImages.length : images.length}
        paginate={paginate}
      />
    </div>
  );
};

export default ImageManagement;

3. 코드 설명

대략적인 설명

• useState를 사용하여 이미지 목록(images)과 현재 페이지(currentPage), 페이지당 이미지 수(imagesPerPage)를 관리합니다.
• useEffect를 사용하여 초기에 예시용 이미지 데이터를 가져옵니다.
• handleSearch 함수를 통해 검색 기능을 구현합니다. 검색어에 따라 이미지를 필터링하고, 페이지를 1로 초기화합니다.
• currentImages 변수를 통해 현재 페이지에 해당하는 이미지 목록을 가져옵니다. 검색이 적용된 경우 필터링된 이미지를 사용합니다.
• paginate 함수를 통해 페이지 변경 시 현재 페이지를 업데이트합니다.

3-1. 상태 관리 및 데이터 초기화

const [images, setImages] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [imagesPerPage] = useState(10);
const [searchInput, setSearchInput] = useState("");
const [filteredImages, setFilteredImages] = useState([]);

useState를 사용하여 이미지 목록(images), 현재 페이지(currentPage), 페이지당 이미지 수(imagesPerPage), 검색 입력값(searchInput), 필터링된 이미지(filteredImages)를 상태로 관리합니다.

3-2. 데이터 초기화 및 검색 기능

useEffect(() => {
  setImages(imagesDummy.data);
}, []);

const handleSearch = (searchValue) => {
  setSearchInput(searchValue);
  const filteredData = images.filter((image) =>
    image.title.toLowerCase().includes(searchValue.toLowerCase())
  );
  setFilteredImages(filteredData);
  setCurrentPage(1); // 검색 시 페이지를 1로 초기화
};

• useEffect를 사용하여 컴포넌트가 마운트될 때 이미지 데이터를 초기화합니다.
• handleSearch 함수를 통해 검색 기능을 구현합니다. 검색어에 따라 이미지를 필터링하고, 필터링된 이미지를 상태에 업데이트하고 페이지를 1로 초기화합니다.

3-3. 페이지네이션 및 데이터 출력

const indexOfLastImage = currentPage * imagesPerPage;
const indexOfFirstImage = indexOfLastImage - imagesPerPage;
const currentImages = searchInput ? filteredImages : images.slice(indexOfFirstImage, indexOfLastImage);

현재 페이지에 해당하는 이미지 목록을 가져옵니다. 검색이 적용된 경우 필터링된 이미지를, 그렇지 않은 경우 전체 이미지를 사용합니다.

3-4. 페이지 변경 및 출력

const paginate = (pageNumber) => setCurrentPage(pageNumber);

paginate 함수를 통해 페이지 변경 시 현재 페이지를 업데이트합니다.

<Pagination
  imagesPerPage={imagesPerPage}
  totalImages={searchInput ? filteredImages.length : images.length}
  paginate={paginate}
/>

페이지네이션 컴포넌트에 페이지당 이미지 수와 전체 이미지 수를 전달하여 페이지를 관리합니다.

<ImageList images={currentImages} />

ImageList 컴포넌트에 현재 페이지에 해당하는 이미지 목록을 전달하여 출력합니다.

---

4. 마무리

위 예시 코드를 통해 React 애플리케이션에서 페이지네이션과 검색 기능을 연동하는 방법을 알아보았습니다.