[React] react-select 사용해서 select 만들기 + select 전부 초기화하는 법

728x90

반응형

react-select 설치하기

---

npm i react-select

 

 

Select 사용하기

---

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

function CustomSelect() {
  const options = [
    { value: 'CS', label: 'CS' },
    { value: '프론트', label: '프론트' },
  ];
  const placeholder = '카테고리 선택';
  
  const [selected, setSelected] = useState('');
  
  const onChangeSelect = (e: any) => {
    if (e) setSelected(e.value);
    else setSelected('');
  };

  return (
    <Select
      onChange={onChangeSelect}
      options={options}
      placeholder={placeholder}
    />
  );
}

export default CustomSelect;

1 . Select의 placeholder 옵션 값은 맨 처음 렌더링되었을 때 셀렉에게 부여되는 값이다. 

2. Select의 options 옵션 값은 셀렉 박스의 옵션들을 보여주는 역할을 한다. 아래와 같이 작성해주면 된다. value와 label을 모두 필수로 줘야한다. 

const options = [
  { value: 'CS', label: 'CS' },
  { value: '프론트', label: '프론트' },
];

3. Select에게 onChange 이벤트를 주고, useState를 사용하여 생성한 setSelected 함수에 값을 담아주면 된다. 만약 값이 있다면 setSelected에 e.value 값을 주고, 그렇지 않다면 빈 배열을 주는 식을 작성했다. 이때 e 값은 아래와 같다. 

option으로 CS를 선택했을 때 console.log(e)

 

Select 초기화하기

---

추가로 선택한 옵션 값을 처음으로 되돌리고 싶을 수도 있다. 초기화는 어떻게 하면 될까? 

 

useRef 훅을 사용하면 된다!

 

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

function CustomSelect() {
  const firstSelectRef = useRef<any>(null);
  const secondSelectRef = useRef<any>(null);

  const onClickResetButton = () => {
    if (firstSelectRef.current || secondSelectRef.current) {
      firstSelectRef.current.clearValue();
      secondSelectRef.current.clearValue();
    }
  };
  
  return (
    <>
      <Select
        ref={firstSelectRef}
        onChange={onChangeSelect}
        options={options}
        placeholder={placeholder}
      />
      <Select
        ref={secondSelectRef}
        onChange={onChangeSelect}
        options={options}
        placeholder={placeholder}
      />
      <button
        onClick={() => onClickResetButton()}
        className="mt-[16%] float-right text-sm cursor-pointer"
      >
        초기화
      </button>
    </>
  );
}

export default CustomSelect;

useRef는 .current로 접근할 수 있고, 초기값은 null로 작성해뒀기 때문에 null 값이 담긴다. Select의 input 값이 변경되면 current 값도 Select으로 변경된다.  

처음 렌더링됬을 때 ref 값

option을 선택했을 때 ref 값

 

초기화 버튼을 생성했고, 이 버튼을 클릭했을 때 Select이 초기화시키고 싶었다. 그래서 clearValue 값을 사용하여 ref의 current 값이 null이 아니라면 초기화될 수 있도록 코드를 구현했다. 

 const onClickResetButton = () => {
   if (firstSelectRef.current || secondSelectRef.current) {
     firstSelectRef.current.clearValue();
     secondSelectRef.current.clearValue();
   }
 };

 

 

발생한 이슈와 해결 방법

---

이를 구현할 때 모든 Select을 초기화시키고 싶었지만 2번째 Select만 초기화되는 이슈가 있었다. 같은 useRef를 Select에게 주었기 때문에 발생된 문제였다. 이를 해결하기 위해 각각의 Ref를 생성했고, 결과적으로 모든 Select을 초기화할 수 있었다. 

 

 

참고 자료

---

• https://www.npmjs.com/package/react-select

• https://react-select.com/home