React와 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색을 달성하는 방법-JS 튜토리얼-php.cn

React와 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색을 달성하는 방법

王林

풀어 주다： 2023-09-27 16:00:43

원래의

1534명이 탐색했습니다.

React와 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색을 달성하는 방법

React 및 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색을 달성하는 방법

소개:
정보 폭발 시대의 도래와 함께 전체 텍스트 검색은 대량의 정보를 얻고 관리하는 효율적인 방법이 되었습니다. React와 Elasticsearch는 모두 현재 매우 인기 있는 기술이며, 이들의 조합은 효율적인 전체 텍스트 검색 기능을 달성하는 데 도움이 될 수 있습니다. 이 글에서는 React와 Elasticsearch를 사용하여 전체 텍스트 검색을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

Elasticsearch 설치 및 구성

먼저 Elasticsearch를 설치하고 구성해야 합니다. Elasticsearch 공식 홈페이지(https://www.elastic.co/cn/downloads/elasticsearch)에 접속하여 자신의 운영체제에 맞는 설치 패키지를 다운로드한 후, 공식 문서에 따라 설치 및 구성하시면 됩니다. 완료되면 Elasticsearch 서비스를 시작하십시오.

Create React Project

시작하기 전에 React 프로젝트를 만들어야 합니다. 명령줄을 열고 다음 명령을 실행합니다.

npx create-react-app search-demo
cd search-demo
npm start

로그인 후 복사

이 시점에서 새로운 React 프로젝트가 생성되어 시작되었습니다.

Elasticsearch 플러그인 설치 및 구성

React 프로젝트 루트 디렉터리에서 다음 명령을 실행하여 elasticsearch 플러그인을 설치합니다.

npm install @elastic/elasticsearch

로그인 후 복사

그런 다음 src 디렉터리에 elasticsearch.js 파일을 생성하고 다음 코드:

import { Client } from '@elastic/elasticsearch';

const client = new Client({ node: 'http://localhost:9200' });

export default client;

로그인 후 복사

이렇게 하면 Elasticsearch의 설치 및 구성이 완료됩니다.

검색 구성 요소 만들기

src 디렉터리에 Search.js 파일을 만들고 다음 코드를 추가합니다.

import React, { useState } from 'react';
import client from './elasticsearch';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const handleSearch = async () => {
    const response = await client.search({
      index: 'your_index_name',
      body: {
        query: {
          match: {
            content: searchTerm
          }
        }
      }
    });

    const hits = response.body.hits.hits;
    setSearchResults(hits);
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      <button onClick={handleSearch}>搜索</button>

      {searchResults.map(result => (
        <div key={result._id}>{result._source.content}</div>
      ))}
    </div>
  );
}

export default Search;

로그인 후 복사

위 코드에서는 먼저 elasticsearch 모듈을 소개하고 검색 구성 요소를 만듭니다. 이 구성 요소에는 입력 상자와 검색 버튼은 물론 검색 결과를 표시하는 데 사용되는 div도 포함되어 있습니다. handlerSearch 함수에서는 elasticsearch 검색 인터페이스를 호출하여 검색 결과를 얻고 searchResults 상태를 업데이트합니다.

App.js에서 검색 구성 요소 사용

App.js 파일을 열고 다음 코드를 추가하세요.

import React from 'react';
import Search from './Search';

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

export default App;

로그인 후 복사

이런 방식으로 App 구성 요소에 검색 구성 요소가 도입되었습니다.

Run Project

이제 명령줄을 통해 React 프로젝트를 실행할 수 있습니다.

npm start

로그인 후 복사

브라우저를 열고 http://localhost:3000에 접속하시면 검색 입력창이 포함된 페이지가 보일 것입니다. 입력창에 키워드를 입력하고 검색버튼을 클릭하면 검색결과가 나옵니다.

결론:
위의 단계를 통해 React와 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색 기능을 성공적으로 구현했습니다. React는 UI를 빠르게 구축할 수 있는 플랫폼을 제공하는 반면 Elasticsearch는 강력한 전체 텍스트 검색 엔진을 제공합니다. 이들의 조합을 통해 우리는 강력한 전체 텍스트 검색 애플리케이션을 쉽게 개발할 수 있습니다. 이 글이 독자들에게 도움이 되고 실무에서 더 큰 역할을 할 수 있기를 바랍니다.

참고 자료: