[REACT] SELECT 만들어 보기

앞서 주의사항!

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

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

 

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

 

결과화면