앞서 주의사항!

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

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

 

SELECT 만들어볼 것

 - App.js

  + src

    +--- App.js

 

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

> npx create-react-app test

> cd test

> code .

 

소스코드

import logo from './logo.svg';
import './App.css';
import * as React from "react";


function App() {
  // 데이타를 준비
  const lookup =
    [
      { id: '1', query: '001', text: '조건검색1-1' },
      { id: '2', query: '001', text: '조건검색1-2' },
      { id: '3', query: '001', text: '조건검색2-1' },
      { id: '4', query: '002', text: '조건검색2-2' },
      { id: '5', query: '002', text: '조건검색2-3' }
    ];

  // state 사용
  const [selected, setSelected] = React.useState("");

  // 셀렉트 컴포넌트가 변경될때 불려짐
  const changeSelectOptionHandler = (event) => {
    setSelected(event.target.value);
  };

  // 선택된 아이템에 따라 값을 비교하고 데이타를 리턴
  var inquiries = lookup.filter(data => {
    if (selected === "001" && data.query.toLocaleLowerCase() === "001") {
      return data;
    } else if (selected === "002" && data.query.toLowerCase() === "002") {
      return data;
    }
  })

  return (
    <div
      style={{
        padding: "16px",
        margin: "16px",
      }}
    >
      <div>
        {/** onChange 될때 changeSelectOptionHandler 함수가 불려지도록 바인드
           */}
        <select onChange={changeSelectOptionHandler}>
          <option value="001">조건검색1</option>
          <option value="002">조건검색2</option>
        </select>
      </div>
      <div>
        {/** inquiries의 모든 텍스트를 출력
           */}
        {inquiries.map(inquiry => (
          <h3 >{inquiry.text}</h3>
        ))}
      </div>
    </div>
  );
}

export default App;

실행

> npm run start

 

결과화면



'까벨로퍼 > 개발 이야기' 카테고리의 다른 글

[REACT] should have a unique "key" prop 을 만났을때..  (0) 2021.06.26
[REACT] ant design + 검색어 자동 완성 만들어보기  (0) 2021.06.07
[REACT] 검색어 자동완성 만들어보기  (0) 2021.06.06
[kotlin] 안드로이드 앱에 인트로 화면 추가하기  (0) 2021.05.25
[react] 네비게이션바 F5 누르면 상태가 초기화 되는 현상 해결  (0) 2021.05.18

앞서 주의사항!

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

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

 

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

 - 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

+ Recent posts

티스토리툴바