[React-Select 라이브러리] 'label' 키 이름 안맞추고 원하는 키 이름으로 지정하는 방법

 

 

React로 개발 중 셀렉트박스를 만들 때 유용하게 사용할 수 있는 React-Select 라이브러리가 있습니다.

 

https://react-select.com/home

React-Select

 

 

이 라이브러리를 활용하면 CSS로 직접 하나하나 셀렉트 박스를 만들지 않아도 몇 줄의 코드만으로 쉽게 셀렉트 박스를 구현 할 수 있습니다.

 

위의 공식 사이트에 들어가면 설치 방법과 간단한 사용 방법이 있으니 참고해 주세요.

 

 

---

저는 이 react-select 라이브러리를 사용해 셀렉트 박스를 구현 중에 불편한 점을 발견하게 되었습니다.

 

 

위 공식 사이트에 있는 예시인데요, 'value'와 'label'로 키 이름을 맞춰 주면 label이 항목으로 보여지고 value가 값이 됩니다.

 

 

 

---

 

하지만 만약 외부에서 받아온 데이터로 셀렉트 박스를 구성하길 원한다면 어떻게 해야할까요? 

 

물론 해당 object의 키값을 'label'과 'value'로 다시 만드는 방법이 있겠지만, 원래 키 이름을 사용할 수 있다면 편리할 것입니다.

 

저도 같은 문제에 맞닥뜨려 stackOverflow를 찾아본 결과 좋은 방법이 있어 공유드립니다.

 

 

https://stackoverflow.com/questions/54559030/react-select-change-name-of-option-fields-from-value-label-to-id

react-select change name of option fields from ({ value: '', label:''}) to ({ id: '', name:''})

 

 

getOptionValue, getOptionLabel 속성을 사용하면 원하는 키값을 직접 지정하여 라벨과 값으로 사용할 수 있습니다.

 

 

options={overwatch_hero} 로 select박스에서 overwatch_hero 배열을 사용할 것임을 알려준 후

getOptionValue={option => option.id} 로 select박스의 value로 'id'의 값을 사용할 것임을 알려줍니다.

getOptionLabel={option => option.hero_name} 로 select박스의 label로 'hero_name'의 값을 사용할 것임을 알려줍니다.

 

 

 

이렇게 직접 지정을 해주면 한 데이터로 여러 개의 셀렉트 박스를 구성하려고 할 때도 매번 키 이름을 바꾸지 않아도 되어 유용하게 사용할 수 있습니다.

 

 

label을 hero_code로 사용하고 싶다면

getOptionLabel={option => option.hero_name} 를

getOptionLabel={option => option.hero_code} 로만 바꿔주면 되겠죠~?

 

성공적으로 label이 변경된 모습입니다.

 

 

직접 사용해보시기 바랍니다.

 

 

---

 

이상 react-select 를 사용할 때 키 이름을 직접 지정하여 사용하는 방법에 관해 말씀드렸습니다.

 

 

감사합니다.