react-select 라이브러리 사용 예시

by

react-select 라이브러리는 html 의 select 구문에 각종 편리하고 자주 쓰이는 기능을 React에서 사용할 수 있도록 모듈화한 라이브러리를 말합니다.

react-select는 기본적인 SELECT OPTION 기능, 신규 Creatable 기능, 고정값을 지정하는 Fixed 기능 등 콤보 박스를 활용할 때 자주 구현되는 기능이 모여 있습니다.

목차 숨기기
1 react-select의 설치
2 react-select를 사용하는 커스텀 컴포넌트 예시
2.1 Select Option의 타입 정의
2.2 react-select 주요 props
2.3 OPTION 설정
2.4 처음 로딩시 기본값 설정하는 방법
3 그 밖에 도움 되는 글

react-select의 설치

다음과 같이 입력하여 react-select 를 설치합니다.

npm i --save react-select

react-select를 사용하는 커스텀 컴포넌트 예시

react-selet를 사용해서 래핑한 커스텀 컴포넌트를 만들어 보았습니다.

import Select from "react-select";

Select Option의 타입 정의

타입스크립트의 경우 SELECT OPTION에 사용될 Property로 아래와 같이 정의할 수 있습니다.

export interface ISelectOption {
  value: string;
  label: string;
  color: string;
  isFixed?: boolean;
  isDisabled?: boolean;
}

react-select에서는 value, label, color, isFixed, isDisable 등의 Property를 사용할 수 있습니다.

isFixed : 선택 이후 변경이 되지 않습니다(고정). 즉, 항상 선택하고자 할 때 사용할 수 있습니다.

isDisabled : 아예 선택을 할 수 없습니다.

react-select 주요 props

Select component는 다음과 같이 사용할 수 있습니다.

<Select
    options={selectOptions}
    isMulti
    closeMenuOnSelect={false}
    onChange={onChange}
    value={defaultValue ? defaultValue : value.filter((option) => option)}
    defaultValue={defaultValue}
  />

isMulti : 여러개 선택할 수 있는 옵션입니다.

onChange : 값이 변경될 때마다 state 값을 지정할 수 있습니다.

closeMenuOnSelect: 선택하면 바로 Close 됩니다. Multi select 일 때에는 풀어두는게 편합니다.

OPTION 설정

options props로 지정할 수 있습니다.

options={selectOptions}

options는 아래와 같이 배열 형태로 만들면 됩니다.

export interface ISelectOption {
  value: string;
  label: string;
  color: string;
  isFixed?: boolean;
  isDisabled?: boolean;
}

export const SelectOptions: ISelectOption[] = [
  { value: "Seoul", label: "Seoul", color: "#0854A0", isFixed: true },
  { value: "Incheon", label: "Incheon", color: "#0854A0", isDisabled: true },
  { value: "Daegu", label: "Daegu", color: "#0854A0" },
  { value: "Jeju", label: "Jeju", color: "#0854A0" },
  { value: "Ulsan", label: "Ulsan", color: "#0854A0" },
];

실행하면 대략 아래와 같이 보입니다.

react-select 에서 SELECT_OPTION 설정

처음 로딩시 기본값 설정하는 방법

default로 사용할 Value 값을 value props과 defaultValue props에 지정해 주면 됩니다.

value={defaultValue ? defaultValue : value.filter((option) => option)}
defaultValue={defaultValue}

이상으로 react-select 라이브러리에 대해서 알아보았습니다.

추가적인 자세한 설명은 react-select document 에서 확인할 수 있습니다.

그 밖에 도움 되는 글

내 웹페이지 구글 폰트 삽입 방법(+복수의 폰트)

리액트 타입스크립트 vite 환경 구성 튜토리얼(2023)

Digital Ocean Managed PostgreSQL 최저 요금 알아보기