React에서 MiniSearch 사용: 고급 검색 및 필터링이 쉬워졌습니다.

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
           {" "}
      <div>
               {" "}
        <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo" />     
           {" "}
        </a>
                <a href="https://react.dev" target="_blank">
                   {" "}
          <img src={reactLogo} className="logo react" alt="React logo" />     
           {" "}
        </a>     {" "}
      </div>
            <h1>Vite + React</h1>      <div className="card">
               {" "}
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}       {" "}
        </button>
                <p>
          Edit <code>src/App.jsx</code> and save to test HMR        {" "}
        </p>     {" "}
      </div>      <p className="read-the-docs">Click on the Vite and React logos to learn more       </p>
    </>
  );
}
export default App;

function App() {
  return <>     </>;
}

export default App;

{
 "blogs": [
 {
 "title": "Wolfenstein",
 "text": "Wolfenstein is a groundbreaking video game series that pioneered the first-person shooter genre. Debuting in 1981, it gained fame with Wolfenstein 3D (1992), placing players in World War II as an Allied spy battling Nazis. Known for its intense gameplay, alternate history, and stealth-action elements, the series continues to evolve with modern reboots and thrilling narratives.",
 "author": "voke",
 "id": "1"
 },
 {
 "title": "Bioshock",
 "text": "BioShock is a critically acclaimed video game series blending first-person shooting with deep storytelling. Set in dystopian worlds like the underwater city of Rapture and floating Columbia, it explores themes of power, morality, and free will. Known for its immersive environments, philosophical depth, and plasmid abilities, BioShock redefined narrative-driven gaming since its debut in 2007.",
 "author": "ese",
 "id": "2"
 },
 {
 "id": "3550",
 "author": "jite",
 "title": "Doom",
 "text": "Doom is a legendary first-person shooter series that revolutionized gaming with its 1993 debut. Players battle demons from Hell across Mars and Earth, armed with iconic weapons like the shotgun and BFG. Known for its fast-paced action, heavy metal soundtrack, and gory visuals, Doom remains a cornerstone of the FPS genre and a cultural phenomenon."
 }
 ]
}

"반응"에서 { useEffect, useRef, useState }를 가져옵니다.
"./BlogList.module.scss"에서 클래스를 가져옵니다.
"minisearch"에서 MiniSearch를 가져옵니다.

const BlogList = () => {
  //블로그와 isLoading 상태를 생성합니다.
  const [블로그, setBlogs] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  //쿼리 및 결과 상태를 생성합니다.
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  // 블로그 상태가 채워졌는지 확인
  console.log(블로그);

  const miniSearchRef = useRef(
    새로운 미니서치({
      fields: ["title", "author", "text"], // 검색할 필드
      storeFields: ["title", "author", "text"], // 반환할 필드
    })
  );
  const miniSearch = miniSearchRef.current;
  console.log("렌더링 후 색인된 블로그:", miniSearch.documentCount);

  //모의 데이터베이스에서 블로그를 가져오는 중:
  const fetchBlogs = async () => {
    setIsLoading(true);

    노력하다 {
      const 응답 = fetch("http://localhost:8000/blogs")를 기다립니다.

      if (!response.ok) {
        새로운 오류()를 던져라;
      }

      const 데이터 = 응답을 기다립니다.json();
      console.log(데이터);

      miniSearch.removeAll();

      miniSearch.addAll(data);
      console.log("색인된 블로그:", miniSearch.documentCount);

      setBlogs(데이터);
    } 잡기(오류) {
      const 메시지 =
        오류 인스턴스오류? error.message: "뭔가 잘못되었습니다.";
      console.log(메시지);
    } 마지막으로 {
      setIsLoading(false);
    }
  };

  // 검색 기능:
  const handlerSearch = (이벤트) => {
    setQuery(event.target.value);

    if (event.target.value.trim() === "") {
      setResults([])를 반환합니다.
    }

    console.log(event.target.value);

    const searchResults = miniSearch.search(event.target.value, { 퍼지: 0.5 });
    console.log("searchResults:", searchResults);
    setResults(searchResults);
  };

  // 검색결과나 블로그를 조건부로 표시하거나 표시함
  const displayPosts = 결과.길이 > 0? 결과: 블로그;

  useEffect(() => {
    fetchBlogs();
  }, []);

  반품 (
    <div>
            <h2>블로그목록</h2>
      {isLoading && <p>Loading...</p>}     {" "}
      <div className={classes.search}>
               {" "}
        <input placeholder="search" value={query} onChange={handleSearch} />     {" "}
      </div>
            <div className={classes.blogs}>
        {displayPosts.map((블로그) => {
          // {blogs.map((블로그) => {
          반품 (
            <div
              키={blog.id}
              className={classes.blog}
             >



<p><strong>제16장</strong><br>
<strong>테스트해 보기:</strong><br>
이제 Wolfenst를 입력하면 다음과 같이 표시됩니다.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>

<p>필터링하기 전에 제가 철자를 완전히 입력할 때까지 기다리지도 않았음을 알 수 있습니다.</p>

<p><em>비판적으로 입력해 보겠습니다.</em></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557528617.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"><br>
비판적으로는 제목의 이름이 아니지만 텍스트를 검색하여 비판적이라는 단어가 포함된 모든 콘텐츠를 표시합니다. 그리고 바이오쇼크는 비판적인 내용을 담고 있는 유일한 콘텐츠라고 해도 과언이 아닙니다.</p>

<p><strong>마지막 생각</strong><br>
이번 MiniSearch 여정을 함께해주셔서 감사합니다! 귀하의 시간과 인내심에 진심으로 감사드리며, 이 가이드가 Reactjs 프로젝트에 MiniSearch를 효과적으로 통합하는 방법을 탐색하고 이해하는 데 도움이 되기를 바랍니다.</p>

<p><strong>작가소개</strong><br>
Voke Bernard는 역동적인 React.js 및 Express.js 애플리케이션 구축을 전문으로 하는 열정적이고 주도적인 M.E.R.N 개발자입니다. 그는 항상 새로운 프로젝트에 협력하기를 원합니다. 그와 함께 일하고 싶다면 언제든지 연락주세요.</p>