2023.12.28

운영진 선발 테스트를 함께 치뤘던 분과 코드리뷰를 위해 만나 이야기를 나누었다. 

이야기 한 것들 중 서로 모르는 부분이 있어 집에 돌아와 검색해봤다. 

 

드롭다운의 내부에 버튼을 추가하는 방법

보통 드롭다운을 만들 때는 다음과 같이 작성한다. 

<select>
	<option>select 1</option>
	<option>select 2</option>
	<option>select 3</option>
</select>

 

우리가 하고싶은 것은 option 태그 내부에 버튼을 추가하는 것이다. 

구체적으로는 이 버튼을 통해 option 태그를 삭제하려 한다. 

 

이것을 구현하기 위해 두 가지 방법을 시도해봤다.

• option 태그 내부에 button 태그 사용
• option 태그로 둘러싼 컴포넌트 생성

하지만 두 방법 모두 콘솔에서 에러가 뜨며 작동하지 않았다. 

검색해본 결과 react-select 라는 외부 라이브러리를 사용해야만 했다. 

 

https://react-select.com/home

React-Select

 

react-select는 select 태그를 보다 자유롭게 커스텀 할 수 있게 도와준다. 

주요 기능들은 다음과 같다. 

• 다양한 스타일과 테마 
• 옵션의 검색
• 다중 및 단일 선택
• 비동기적 옵션 로딩
• 이벤트 핸들링

이 외에도 스크롤, 렌더링 방법 커스텀 등의 다양한 기능을 지원한다. 

 

결국 내가 원했던 'option 태그 내부에 button 추가'는 다음과 같이 구현할 수 있다. 

import React from 'react';
import Select from 'react-select';

const CustomSelect = () => {
  const options = [
    { value: 'option1', label: 'Option 1', content: <button>Button 1</button> },
    { value: 'option2', label: 'Option 2', content: <button>Button 2</button> },
    // Add more options as needed
  ];

  return (
    <Select
      options={options}
      isSearchable={false} // Optional: disable search box
      components={{
        Option: ({ innerProps, label, data }) => (
          <div {...innerProps}>
            {data.content} {label}
          </div>
        ),
      }}
    />
  );
};

export default CustomSelect;

 

options는 option객체들의 배열이다. 

isSearchable 속성으로 검색기능을 사용할 수 있다(위의 코드는 false이므로 당연히 사용하지 않는 모습).

components는 option태그의 커스텀을 위한 속성이다. 

innerProps는 라이브러리에 정의된 option 태그에 대한 정보(이벤트핸들링 등)를 나타낸다. 

더 자세한 사용법은 위의 공식 문서에서 확인해보도록 하자. 

 

---