npm i  react-select

//* 사용자가 옵션을 추가 해야 하는 경우
import CreatableSelect from "react-select/creatable";

<>
    <CreatableSelect
        //* 다중 셀렉트 옵션
        isMulti
        //* 옵션을 새로 추가 할때 입력한 value값이 들어온다
        //* 여기서 서버에 맞게 상태 업데이트 해줌
        onCreatebleOption={(value) => setState(value)}
        value={state => state.map(value => ({label: option 이름으로 사용될 state의 값, value: input value 속정으로 사용될 값}))}
        //* 옵션을 삭제 하거나 변경할때 객체 값이 들어온다
        onChange={(obj) => 여기서 state 값 업데이트 해준다} 
    />
</>

//* 옵션을 선택만 해야 하는 경우
import ReactSelect from "react-select";
<>
  <ReactSelect
    isMulti
    onCreateOption
    value
    //* 사용자들이 선택할 수 있는 옵션
    options={(state) => state.map(option => ({label: option.label, value: option.value}))}
    onChange
  />
</>

# React-select library

### 설치 방법
```js
npm i  react-select
```


### 사용방법
```js
//* 사용자가 옵션을 추가 해야 하는 경우
import CreatableSelect from "react-select/creatable";

<>
    <CreatableSelect
        //* 다중 셀렉트 옵션
        isMulti
        //* 옵션을 새로 추가 할때 입력한 value값이 들어온다
        //* 여기서 서버에 맞게 상태 업데이트 해줌
        onCreatebleOption={(value) => setState(value)}
        value={state => state.map(value => ({label: option 이름으로 사용될 state의 값, value: input value 속정으로 사용될 값}))}
        //* 옵션을 삭제 하거나 변경할때 객체 값이 들어온다
        onChange={(obj) => 여기서 state 값 업데이트 해준다} 
    />
</>

//* 옵션을 선택만 해야 하는 경우
import ReactSelect from "react-select";
<>
  <ReactSelect
    isMulti
    onCreateOption
    value
    //* 사용자들이 선택할 수 있는 옵션
    options={(state) => state.map(option => ({label: option.label, value: option.value}))}
    onChange
  />
</>
```

###  연구 필요⚠️
- 타입스크립트 스타일 오버라이트시 onChange 값으로 들어오는 타입에 문제 생김.
- Type Assertion으로 어찌어찌 동작은 하나 연구가 필요함.


<a href="https://react-select.com/home" target="_blank">[참조]</a>