React 앱에서 MiniSearch를 활용한 고급 검색 및 필터링 구현 방법

2024-11-22 18:17:03

reactminisearchwebdevjavascript

MiniSearch란 무엇인가?

MiniSearch는 자바스크립트로 구현된 경량 라이브러리로, 소규모에서 중규모 데이터셋에 대한 전방 검색(full-text search)을 지원합니다. 이 라이브러리의 주요 특징으로는 퍼지 매칭, 접두사 검색, 관련성에 따른 랭킹, 필드에 가중치를 두는 기능 등이 있습니다. 이러한 기능을 통해 사용자는 오타가 있더라도 적합한 검색 결과를 얻을 수 있습니다.

퍼지 매칭

퍼지 매칭은 입력된 단어가 정확하지 않더라도 유사한 단어를 찾을 수 있도록 돕습니다. 예를 들어, "wlf"라 입력했을 때 "wolf"를 찾을 수 있는 것입니다.

접두사 검색

접두사 검색은 말 그대로 단어의 시작 부분만 입력해도 해당 단어와 관련된 결과를 찾을 수 있게 해줍니다. "car"라 입력하면 "cart", "carbonated" 등의 결과를 얻을 수 있습니다.

React 앱에 MiniSearch 설정하기

1. 프로젝트 설정

React 애플리케이션에서 MiniSearch를 설정하기 위해 Vite를 사용하여 프로젝트를 생성합니다. 터미널을 통해 아래 명령어로 프로젝트를 시작할 수 있습니다:

npm create vite@latest .

React와 JavaScript를 선택하여 초기 설정을 완료한 이후, 다음 명령어로 프로젝트를 실행합니다:

npm install
npm run dev

2. 패키지 설치

다음으로 MiniSearch 패키지를 설치합니다:

npm install minisearch

3. 데이터 준비하기

백엔드 없이 외부 데이터 파일을 불러와 사용할 것입니다. data 폴더를 생성하고 db.json 파일을 준비합니다. 예시 데이터는 다음과 같습니다:

{
  "blogs": [
    {
      "title": "Wolfenstein",
      "text": "Wolfenstein is a groundbreaking video game...",
      "author": "voke",
      "id": "1"
    }
  ]
}

MiniSearch 적용하기

React 컴포넌트에서 MiniSearch를 사용하여 검색 기능을 적용할 수 있습니다. 예를 들어, App.jsx에서 데이터 파일을 읽어 MiniSearch를 사용하도록 설정합니다.

React 컴포넌트 코드

import MiniSearch from 'minisearch'

const App = () => {
  const data = // JSON 데이터 로드 로직
  const miniSearch = new MiniSearch({
    fields: ['title', 'text', 'author'], // 검색할 필드
    storeFields: ['title', 'text', 'author']
  })

  miniSearch.addAll(data.blogs)

  const handleSearch = (query) => {
    const results = miniSearch.search(query)
    console.log(results)
  }

  return (
    <div>
      <input type="text" onChange={(e) => handleSearch(e.target.value)} />
    </div>
  )
}

export default App

결론

MiniSearch는 React 애플리케이션에 빠르고 강력한 검색 기능을 추가할 수 있는 훌륭한 도구입니다. 위에서 설명한 방법을 통해 사용자는 정확하고 효율적인 검색을 경험할 수 있으며, 데이터가 외부에 존재하더라도 문제없이 검색할 수 있습니다. MiniSearch와 함께 웹 애플리케이션의 검색 경험을 한층 향상시켜 보세요.

R_11