여러 조건을 만족하는 데이터 구하기

✨여러 조건을 만족하는 데이터 구하기

프로젝트를 진행하다보면 여러 조건을 만족하는 데이터를 구해야하는 경우들이 있다. 이를 연습해보기 위해 다음과 같은 조건을 가진 필터링 기능을 만들어 보았다.

💡필터링 조건

1. 사용자가 입력한 도서관 이름 필터링

• 사용자가 전체 도서관이 아니라 특정 도서관을 선택했을 때 해당 도서관에 있는 도서들만 검색하기

2. 사용자가 입력한 검색어를 바탕으로 필터링

• 사용자가 책 제목을 선택하고 검색어를 입력했을 경우, 책 제목이 일치하는 도서 검색
• 사용자가 작가를 선택하고 검색어를 입력했을 경우, 작가가 일치하는 도서 검색
• 사용자가 출판사를 선택하고 검색어를 입력했을 경우, 출판사가 일치하는 도서 검색
• 사용자가 전체를 선택하고 검색어를 입력했을 경우, 책 제목 또는 작가 또는 출판사가 일치하는 도서 검색

3. 사용자가 입력한 기간을 바탕으로 필터링

• 사용자가 startDate를 선택한다면, 해당 날짜 이후에 출시된 도서 검색
• 사용자가 endDate를 선택한다면, 해당 날짜 이후에 출시된 도서 검색
• 사용자가 startDate와 endDate를 선택한다면, startDate보다 이후에 출시된 도서와, endDate 이전에 출시된 도서 검색

💡코드 작성

전체 도서(원본 데이터)를 filter 하도록 설정하는데, 조건을 만족하는 데이터만 반환하도록 설정,
만약 해당 조건을 만족시키지 않다면, early return 하도록 설정하여 제거

import React, { useState } from "react";

// 가상의 도서 데이터
const initialData = [
  {
    id: 1,
    title: "To Kill a Mockingbird",
    publisherId: 101,
    publisher: "HarperCollins",
    libraryName: "Central Library",
    author: "Harper Lee",
    publicationDate: "1960-07-11",
    status: "Available"
  },
  {
    id: 2,
    title: "1984",
    publisherId: 102,
    publisher: "Secker & Warburg",
    libraryName: "City Branch",
    author: "George Orwell",
    publicationDate: "1949-06-08",
    status: "Checked Out"
  },
  {
    id: 3,
    title: "The Great Gatsby",
    publisherId: 103,
    publisher: "Charles Scribner's Sons",
    libraryName: "Main Library",
    author: "F. Scott Fitzgerald",
    publicationDate: "1925-04-10",
    status: "Available"
  },
  {
    id: 4,
    title: "To Kill a Mockingbird",
    publisherId: 101,
    publisher: "HarperCollins",
    libraryName: "West Branch",
    author: "Harper Lee",
    publicationDate: "1960-07-11",
    status: "Available"
  },
  {
    id: 5,
    title: "Moby-Dick",
    publisherId: 104,
    publisher: "Richard Bentley",
    libraryName: "Downtown Branch",
    author: "Herman Melville",
    publicationDate: "1851-10-18",
    status: "Available"
  },
  {
    id: 6,
    title: "The Catcher in the Rye",
    publisherId: 105,
    publisher: "Little, Brown and Company",
    libraryName: "East Branch",
    author: "J.D. Salinger",
    publicationDate: "1951-07-16",
    status: "Checked Out"
  }
];

function App() {
  const books = initialData;
  const libraries = Array.from(
    new Set(initialData.map((item) => item.libraryName))
  );
  const [filteredBooks, setFilteredBooks] = useState(initialData);
  const [searchKeyword, setSearchKeyword] = useState("");
  const [libraryName, setLibraryName] = useState("전체");
  const [bookContent, setBookContent] = useState("ALL");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  const handleFilter = (event) => {
    event.preventDefault();

    const filtered = books.filter((book) => {
      // 소장하고 있는 도서관 필터링
      if (libraryName !== "전체" && book.libraryName !== libraryName)
        return false;

      // 도서관련 내용 필터링 (제목, 출판사, 작가)
      switch (bookContent) {
        case "Title":
          if (!book.title.toLowerCase().includes(searchKeyword.toLowerCase()))
            return false;
          break;
        case "Author":
          if (!book.author.toLowerCase().includes(searchKeyword.toLowerCase()))
            return false;
          break;
        case "Publisher":
          if (
            !book.publisher.toLowerCase().includes(searchKeyword.toLowerCase())
          )
            return false;
          break;
        case "ALL":
          if (
            !book.title.toLowerCase().includes(searchKeyword.toLowerCase()) &&
            !book.author.toLowerCase().includes(searchKeyword.toLowerCase()) &&
            !book.publisher.toLowerCase().includes(searchKeyword.toLowerCase())
          ) {
            return false;
          }
          break;
      }

      // 사용자가 지정한 기간을 바탕으로 책 출판일 필터링
      if (startDate && new Date(book.publicationDate) < new Date(startDate))
        return false;
      if (endDate && new Date(book.publicationDate) > new Date(endDate))
        return false;

      // 모든 조건 성립 시 true 반환
      return true;
    });

    if (filtered.length > 0) {
      setFilteredBooks(filtered);
    } else {
      setFilteredBooks([]);
    }
  };

  const handleReset = () => {
    setFilteredBooks(initialData);
    setSearchKeyword("");
    setLibraryName("전체");
    setBookContent("ALL");
    setStartDate("");
    setEndDate("");
  };

  return (
    <div>
      <h1>도서 목록</h1>
      <div style=>
        <table>
          <thead>
            <tr>
              <td>도서 제목</td>
              <td>작가</td>
              <td>출판사</td>
              <td>출판일</td>
              <td>소장 도서관</td>
              <td>도서 상태</td>
            </tr>
          </thead>
          <tbody>
            {filteredBooks.length === 0 && (
              <tr>
                <td colSpan="6">일치하는 검색결과가 없습니다.</td>
              </tr>
            )}
            {filteredBooks.length !== 0 &&
              filteredBooks.map((book) => (
                <tr key={book.id}>
                  <td>{book.title}</td>
                  <td>{book.author}</td>
                  <td>{book.publisher}</td>
                  <td>{book.publicationDate}</td>
                  <td>{book.libraryName}</td>
                  <td>{book.status}</td>
                </tr>
              ))}
          </tbody>
        </table>
        <div>
          <form onSubmit={handleFilter}>
            <fieldset>
              <label>도서관</label>
              <select onChange={(e) => setLibraryName(e.target.value)}>
                <option defaultValue="All">전체 도서관</option>
                {libraries.map((library) => (
                  <option value={library}>{library}</option>
                ))}
              </select>
            </fieldset>
            <fieldset>
              <label>검색</label>
              <select onChange={(e) => setBookContent(e.target.value)}>
                <option defaultValue="All">전체</option>
                <option value="Title">책 제목</option>
                <option value="Author">작가</option>
                <option value="Publisher">출판사</option>
              </select>
              <input
                type="text"
                placeholder="검색어를 입력하세요"
                onChange={(e) => setSearchKeyword(e.target.value)}
              />
            </fieldset>
            <fieldset>
              <label>출판일</label>
              <div style=>
                <p>시작일</p>
                <input
                  type="date"
                  value={startDate}
                  onChange={(e) => setStartDate(e.target.value)}
                />
              </div>
              <div style=>
                <p>시작일</p>
                <input
                  type="date"
                  value={endDate}
                  onChange={(e) => setEndDate(e.target.value)}
                />
              </div>
            </fieldset>
            <button type="submit">검색하기</button>
            <button type="button" onClick={handleReset}>
              초기화
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default App;

하단의 Codepen에서 필터링 기능을 사용해보세요.

See the Pen 조건 여러개 데이터 필터링하기 by 혬 (@jexbagvl-the-reactor) on CodePen.