[리액트 React] select option 만들기 / select value 가져오기 / How to create select options / How to get value from select

 

 

 

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는

셀렉트박스를 만들고 그 안에 옵션을 만드는 내용에 대해 다뤄보겠습니다.

 

 

  1. 셀렉트 박스를 만들기 위해 react-select를 설치합니다.

터미널을 열고 아래의 명령어를 입력하여 react-select 라이브러리를 설치해 주세요.

npm i react-select

 

 

  2. 아래의 코드를 따라해 주세요.

이 때, option을 만드는 함수를 컴포넌트 밖으로 빼야 합니다.

그러지 않으면, state가 바뀔 때마다 option을 재렌더링 하게 되기 때문에 불필요한 작업을 작업을 하게 됩니다.

import React, {useState} from 'react';
import Select from 'react-select';

// 시간 option 만들기 - 시(hour)
let hour = [];
for (let i = 1; i < 25; i++) {
  let op = {};
  
  // 시간을 00시로 나타내기 위해
  op.value = ('0' + i).slice(-2);
  op.label = ('0' + i).slice(-2) + '시';
  
  hour.push(op);
}

const MakeSelect = () => {
	const [timeValue, setTimeValue] = useState('');

	return (
    	<>
        	<p>시작시간</p>
            <Select
            	onChange={(e) => setTimeValue({...timeValuem, e.value}
            	placeholder="시간을 선택하세요."
                options={hour}
            />
        </>
    )
}

export default MakeSelect;

 

 

 

  3. 완성

맨 상단의 이미지처럼 화면이 만들어졌는지 확인해 주세요 :)