앞서 주의사항!
- 저도 공부하는 중이라 이해도가 낮아 설명에 있어서 부족한 부분이 있을 수 있습니다.
- 하지만 도움이 되실 분도 있으리라 생각합니다.
검색어 자동 완성 만들어볼 것
- 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
결과화면
'까벨로퍼 > 개발 이야기' 카테고리의 다른 글
| [REACT] ant design + 검색어 자동 완성 만들어보기 (0) | 2021.06.07 |
|---|---|
| [REACT] SELECT 만들어 보기 (0) | 2021.06.07 |
| [kotlin] 안드로이드 앱에 인트로 화면 추가하기 (0) | 2021.05.25 |
| [react] 네비게이션바 F5 누르면 상태가 초기화 되는 현상 해결 (0) | 2021.05.18 |
| [react] 웹 프레임 창 타이틀 수정 (0) | 2021.05.17 |