React-Select v2에서 Optgroups 만드는 방법

react-select v2에서 Optgroup 만드는 방법

react-select 라이브러리를 사용하여 Optgroup를 만들고 싶은 경우, 어디에도 문서화되어 있지 않다는 것을 알 수 있습니다. 다행히도 저는 여러분에게 해결책을 제공할 수 있습니다!

문제

우선 문제를 살펴보겠습니다. 다음과 비슷한 구조를 가지고 있습니다:

render() {
  const options = [
    {
      label: "Group 1",
      children: [
        { label: "Group 1, option 1", value: "value_1" },
        { label: "Group 1, option 2", value: "value_2" }
      ]
    },
    { label: "루트 옵션1", value: "value_3" },
    { label: "루트 옵션2", value: "value_4" }
  ];
  return <Select options={options} />
}

“Group 1″이 Optgroup로, 그 자식으로 옵션 1과 2가 렌더링되기를 기대합니다. 하지만 “Group 1″은 일반적인 옵션으로 나타납니다. “Group 1″안에서 “children” 또는 “values”를 사용해 보셨으나 실패하셨을 것입니다.

해결책

조금의 실험과 연구 끝에, react-select에서 Optgroup를 만들기 위한 올바른 키는 “options”라는 것을 발견했습니다. 다음과 같이 코드를 업데이트하세요:

render() {
  const options = [
    {
      label: "Group 1",
      options: [
        { label: "Group 1, option 1", value: "value_1" },
        { label: "Group 1, option 2", value: "value_2" }
      ]
    },
    { label: "루트 옵션1", value: "value_3" },
    { label: "루트 옵션2", value: "value_4" }
  ];
  return <Select options={options} />
}

이 코드 업데이트로 인해 “Group 1″은 Optgroup로 렌더링되고, “Group 1, option 1″과 “Group 1, option 2″는 그 자식으로 렌더링됩니다. 다른 옵션은 여전히 루트 옵션으로 유지될 것입니다.

결론

이 글에서는 react-select v2에서 Optgroup를 만드는 방법을 살펴보았습니다. “children”이나 “values” 대신 “options” 키를 사용하여 Optgroup를 성공적으로 만들고 선택 목록을 효과적으로 구성할 수 있습니다.

이제 해결책을 알았으니, Optgroup를 쉽게 react-select 컴포넌트에 통합할 수 있습니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs