ram2 🚗

react에서 드롭박스 버튼 만들기

어쩌다 하게 되었냐면,

최근 학교에서 방학 중 진행하는 웹 서비스 캠프에 참여하고 있다.

개발 언어, 툴 등을 자유롭게 선택할 수 있기에 나는 프론트는 리액트로 개발하겠다 결정하였다.

현재 직접 프로젝트를 기획하여 새로운 서비스를 만들 수 있고, 실제 있는 서비스를 클론할 수도 있다.

동아리를 통해 기획의 과정이 얼마나 어렵고 힘든지를 알고 있었기에 나는 클론코딩을 선택하였다.

이번 캠프에서의 목표는 다음과 같다.

웹 서비스가 만들어지는 전체적인 과정을 익히는 것. (프론트부터 서버까지)

이를 위해 Velog를 클론코딩하기로 결정하였다.

서론이 길었는데, 클론코딩을 하다보니 드롭박스를 사용해야 할 일이 있었다.

사용하기만 하면 되는 것이 아니라, 디자인도 커스텀하는 과정이 필요했다.

1. react-dropdown 설치하기

터미널에 다음 명령어를 입력하고 라이브러리를 설치해준다.

// npm으로 설치하려면 다음 명령어를 입력하면 된다.
$ npm install react-dropdown

// yarn으로 설치하려면 다음 명령어를 입력하면 된다.
$ yarn add react-dropdown

https://www.npmjs.com/package/react-dropdown

( 자세히 알고 싶다면 위 사이트 참고하기 )

2. 상단에 import 해주기

설치가 완료 되었다면, 파일 상단에 다음 코드를 입력하여 import 해준다.

설치가 잘 되었다면, 아무런 에러 없이 import가 가능하다.

import Dropdown from 'react-dropdown';
import "react-dropdown/style.css";

두 가지를 모두 import 해줘야 한다 !

이렇게 import가 잘 되었다면, 다음과 같이 코드 내에서 사용할 수 있다.

const options = [
  'one', 'two', 'three'
];
const defaultOption = options[0];
<Dropdown options={options} onChange={this._onSelect} value={defaultOption} placeholder="Select an option" />;

(위 코드는 공식 문서에 나온 예제이다 !)

3. 커스텀 하기 !!

위 이미지는 내가 커스텀해서 만든 결과물이다.

커스텀을 하지 않으면, 기본 디자인으로 보여진다.

그럼 어떻게 다음과 같이 커스텀 하였는지 하나씩 살펴보자 !!

3-1. 드롭박스 자체를 커스텀하려면,

여기에서 드롭박스 자체란, 아래와 같은 이미지이다. 즉, 박스가 열리지 않은, 아무것도 하지 않았을 때 보여지는 부분이다.

현재 내가 준 커스텀은, 배경색, 폰트 크기, 박스 border-radius, 높이, 너비가 있다.

이러한 속성들을 수정하기 위해서는 다음과 같이 하면 된다.

앗 참고로 나는 styled component를 사용하였다.

const StyledDropdown = styled(Dropdown)`
  .Dropdown-control {
    background-color: ${theme.colors.secondBlack};
    color: white;
    border-radius: 5px;
    border-color: transparent;
    width: 110px;
    height: 32px;
    font-size: 13px;
  }
`;

이렇게 .Dropdown-control을 가져와 해당 속성에 접근해 수정하면 된다.

3-2. 드롭박스를 열었을 때 보여지는 메뉴를 커스텀 하려면,

드롭박스를 클릭하여 열리는 메뉴들을 커스텀하려면 어떻게 해야할까?

이렇게 나는 메뉴의 배경 색, 폰트 크기, 폰트 색 등을 지정하였다.

드롭박스 메뉴를 커스텀 하기 위해서는 다음과 같이 하면 된다.

.Dropdown-menu {
    background-color: ${theme.colors.secondBlack};
    color: white;
    font-size: 13px;
  }

이렇게 .Dropdown-menu에 접근하여 해당 속성들을 커스텀하면 된다.

3-3. 선택된 옵션을 커스텀하려면,

내가 선택한 옵션은 다르게 보여져야 한다. 3-2에서의 사진을 보면, 내가 선택한 '이번 주'는 색상이 다르게 표시된 것을 확인할 수 있다.

이처럼 선택한 옵션에 대한 속성에 접근하기 위해서는 이렇게 하면 된다.

.Dropdown-option.is-selected {
    color: ${theme.colors.primary};
    background-color: ${theme.colors.secondBlack};
    font-size: 13px;
  }

이렇게 .Dropdown-option.is-selected에 접근하여 선택한 옵션에 대한 디자인을 커스텀할 수 있다.

3-4. 마지막으로, 나머지 옵션들을 커스텀하려면,

이 부분은 3-2 부분에서 이미 설정해주었다 생각했으나, 따로 또 해줘야 적용이 되었다.

3-2, 3-4 둘 중 하나라도 주석처리하면 이렇게 된다..

선택된 옵션이 아닌 나머지 옵션들을 커스텀하기 위해 다음과 같이 하였다.

.Dropdown-option {
    color: ${theme.colors.white};
    font-size: 13px;
  }

이렇게 .Dropdown-option에 접근하여 해당 속성들을 설정해주었다.

4. 정리하면,

이렇게 할 수 있다. 나는 styled component를 사용하였기에 이렇게 백틱 안에 넣어주었다.

const StyledDropdown = styled(Dropdown)`
  .Dropdown-control {
    background-color: ${theme.colors.secondBlack};
    color: white;
    border-radius: 5px;
    border-color: transparent;
    width: 110px;
    height: 32px;
    font-size: 13px;
  }
  .Dropdown-menu {
    background-color: ${theme.colors.secondBlack};
    color: white;
    font-size: 13px;
  }
  .Dropdown-option.is-selected {
    color: ${theme.colors.primary};
    background-color: ${theme.colors.secondBlack};
    font-size: 13px;
  }
  .Dropdown-option {
    color: ${theme.colors.white};
    font-size: 13px;
  }
`;

실제 이 스타일을 적용하기 위해서는 다음과 같이 호출하면 된다.

<StyledDropdown options={options} value={defaultOption} />

이렇게 하면 기본으로 제공해주는 dropdown을 내가 원하는 디자인대로 커스텀할 수 있다.