React 및 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색을 달성하는 방법
소개:
정보 폭발 시대의 도래와 함께 전체 텍스트 검색은 대량의 정보를 얻고 관리하는 효율적인 방법이 되었습니다. React와 Elasticsearch는 모두 현재 매우 인기 있는 기술이며, 이들의 조합은 효율적인 전체 텍스트 검색 기능을 달성하는 데 도움이 될 수 있습니다. 이 글에서는 React와 Elasticsearch를 사용하여 전체 텍스트 검색을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.
먼저 Elasticsearch를 설치하고 구성해야 합니다. Elasticsearch 공식 홈페이지(https://www.elastic.co/cn/downloads/elasticsearch)에 접속하여 자신의 운영체제에 맞는 설치 패키지를 다운로드한 후, 공식 문서에 따라 설치 및 구성하시면 됩니다. 완료되면 Elasticsearch 서비스를 시작하십시오.
시작하기 전에 React 프로젝트를 만들어야 합니다. 명령줄을 열고 다음 명령을 실행합니다.
npx create-react-app search-demo cd search-demo npm start
이 시점에서 새로운 React 프로젝트가 생성되어 시작되었습니다.
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 파일을 열고 다음 코드를 추가하세요.
import React from 'react'; import Search from './Search'; function App() { return ( <div> <Search /> </div> ); } export default App;
이런 방식으로 App 구성 요소에 검색 구성 요소가 도입되었습니다.
이제 명령줄을 통해 React 프로젝트를 실행할 수 있습니다.
npm start
브라우저를 열고 http://localhost:3000에 접속하시면 검색 입력창이 포함된 페이지가 보일 것입니다. 입력창에 키워드를 입력하고 검색버튼을 클릭하면 검색결과가 나옵니다.
결론:
위의 단계를 통해 React와 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색 기능을 성공적으로 구현했습니다. React는 UI를 빠르게 구축할 수 있는 플랫폼을 제공하는 반면 Elasticsearch는 강력한 전체 텍스트 검색 엔진을 제공합니다. 이들의 조합을 통해 우리는 강력한 전체 텍스트 검색 애플리케이션을 쉽게 개발할 수 있습니다. 이 글이 독자들에게 도움이 되고 실무에서 더 큰 역할을 할 수 있기를 바랍니다.
참고 자료:
위 내용은 React와 Elasticsearch를 사용하여 효율적인 전체 텍스트 검색을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!