[REACT] 검색어 자동완성 만들어보기

앞서 주의사항!

 - 저도 공부하는 중이라 이해도가 낮아 설명에 있어서 부족한 부분이 있을 수 있습니다.

 - 하지만 도움이 되실 분도 있으리라 생각합니다.

 

검색어 자동 완성 만들어볼 것

 - App.js, SearchBar.js (파일 생성)

  + src

    +--- App.js

    +--- SearchBar.js

 

프로젝트를 생성하고 vs code실행

> npx create-react-app test

> cd test

> code .

 

소스코드

// App.js import './App.css'; import React, { useState } from "react"; import SearchBar from './SearchBar'; // App.js 에 기본적으로 추가되는 코드를 정리하고 심플하게 만듦 function App() { //검색에 필요한 원천 데이타, 검색어, 결과값  const data = [     {"name":"키움증권", "code":"000000"},     {"name":"삼성전자", "code":"000002"},     {"name":"LG전자", "code":"000003"},     {"name":"스튜디오드래곤", "code":"000004"},     {"name":"영호화학", "code":"000005"},     {"name":"씨젠", "code":"000006"},     {"name":"LG화학", "code":"000007"},      {"name":"DL", "code":"000008"},     {"name":"오뚜기", "code":"000009"},   ];     const [keyword, setKeyword] = useState();   const [results, setResult] = useState([]);      // 필드를 업데이트    const updateField = (field, value, update = true) => {     if (update) onSearch(value);     if (field === 'keyword') {       setKeyword(value);     }     if (field === 'results') {       setResult(value);     }   }      // 입력된 텍스트로 data 배열에서 찾아 매칭되는 결과들을 저장    const onSearch = text => {     var results = data.filter(item => true === matchName(item.name, text));     setResult({ results });   };  // 검색해야할 문자열을 키워드와 비교하여 매칭이 되는지 체크     const matchName = (name, keyword) => {     var keyLen = keyword.length;     name = name.toLowerCase().substring(0, keyLen);     if (keyword === "") return false;     return name === keyword.toString().toLowerCase();   };      return (     <div className="App">           Search Auto Complete           <SearchBar keyword={keyword} results={results} updateField={updateField}></SearchBar>     </div>   ); } export default App;

 

// SearchBar.js import React from "react"; // 키워드, 결과값들, 업데이트필드를 전달받는다 const SearchBar = ({ keyword, results, updateField }) => {   //      const updateText = text => {         //console.log('update text', text);         updateField("keyword", text, false);         updateField("results", []);     };          var renderResults;     const arr = results['results'];     if(arr) {     // arr 에 검색어에 대한 결과가 담기면, SearchView 호출      renderResults = arr.map((item => {             return (                 <SearchView                     updateText={updateText}                     name={item.name}                     code={item.code}                     key={item.code}                 />             );         }));     }     // onChange를 사용하여 글자를 입력할때마다 updateField호출하고 renderResults를 그린다.     return (         <div className="auto">             <input                 className="search-bar"                 placeholder="Search"                 value={keyword || ''}                 onChange={e => updateField("keyword", e.target.value)}             />             <div className="search-results">{renderResults}</div>         </div>     ); }; // 검색된 아이템 "naem" "code" 출력 // 결과값을 클릭하면 updateText를 호출하여 input에 name을 표시 const SearchView = ({ name, code, index, updateText }) => {     //console.log('search view:', name);     return (       <div         onClick={() => updateText(name)}         className={`search-preview ${index === 0 ? "start" : ""}`}       >         <div className="first">           <p className="name">{name}</p>           <p className="code">{code}</p>         </div>       </div>     );   }; export default SearchBar;

 

실행

> npm run start

 

 

결과화면