React에서 Dropdown 컴포넌트 만들기

 

Dropdown 컴포넌트는 React 애플리케이션에서 자주 사용되는 UI 요소입니다. 이 글에서는 React를 사용해 간단한 Dropdown 컴포넌트를 만드는 방법과 주요 구현 사항을 단계별로 설명합니다. 추가로 확장 가능하고 재사용성이 높은 컴포넌트를 설계하는 팁도 제공합니다.

1. 기본 Dropdown 컴포넌트 설계

Dropdown은 일반적으로 선택 가능한 옵션 목록과 현재 선택된 값을 표시하는 UI로 구성됩니다. 이를 위해 다음과 같은 기본 기능을 구현합니다:

1. 사용자가 Dropdown을 클릭하면 옵션 목록이 열립니다.
2. 옵션을 선택하면 선택한 값이 표시됩니다.
3. 옵션 목록 외부를 클릭하면 목록이 닫힙니다.

예제 코드

아래는 간단한 Dropdown 컴포넌트의 구현 예제입니다:

import React, { useState, useRef, useEffect } from 'react';

function Dropdown({ options, onSelect }) {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  const dropdownRef = useRef(null);

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  const handleOptionClick = (option) => {
    setSelectedOption(option);
    onSelect(option);
    setIsOpen(false);
  };

  const handleClickOutside = (event) => {
    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div className="dropdown" ref={dropdownRef}>
      <button className="dropdown-toggle" onClick={handleToggle}>
        {selectedOption || 'Select an option'}
      </button>
      {isOpen && (
        <ul className="dropdown-menu">
          {options.map((option, index) => (
            <li
              key={index}
              className="dropdown-item"
              onClick={() => handleOptionClick(option)}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Dropdown;

---

2. 주요 구현 사항

2.1. 상태 관리

Dropdown의 상태(isOpen 및 selectedOption)를 관리하기 위해 useState를 사용합니다. isOpen은 옵션 목록의 표시 여부를 제어하고, selectedOption은 현재 선택된 값을 저장합니다.

2.2. 클릭 외부 감지

사용자가 Dropdown 외부를 클릭하면 옵션 목록을 닫아야 합니다. 이를 위해 useRef와 useEffect를 사용하여 외부 클릭 이벤트를 감지합니다.

코드 요약

useEffect(() => {
  const handleClickOutside = (event) => {
    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
      setIsOpen(false);
    }
  };

  document.addEventListener('mousedown', handleClickOutside);
  return () => {
    document.removeEventListener('mousedown', handleClickOutside);
  };
}, []);

2.3. 옵션 선택

옵션을 클릭하면 onSelect 콜백 함수를 호출해 부모 컴포넌트에 선택된 값을 전달하고, Dropdown을 닫습니다.

코드 요약

const handleOptionClick = (option) => {
  setSelectedOption(option);
  onSelect(option);
  setIsOpen(false);
};

---

3. 스타일링

Dropdown 컴포넌트는 사용자 경험을 높이기 위해 적절한 스타일링이 필요합니다. 아래는 CSS를 사용한 간단한 스타일링 예제입니다:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
}

.dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
}

---

4. 확장 가능성

Dropdown 컴포넌트를 확장하고 재사용성을 높이기 위해 다음과 같은 기능을 추가할 수 있습니다:

1. 키보드 네비게이션 지원: 키보드로 옵션을 탐색하고 선택할 수 있는 기능 추가.
2. 멀티 셀렉트 지원: 여러 옵션을 선택할 수 있도록 수정.
3. 비동기 데이터 로드: 서버에서 데이터를 가져와 옵션 목록을 동적으로 생성.

키보드 네비게이션 예제

const handleKeyDown = (event) => {
  if (event.key === 'ArrowDown') {
    // 다음 옵션으로 이동
  } else if (event.key === 'ArrowUp') {
    // 이전 옵션으로 이동
  } else if (event.key === 'Enter') {
    // 현재 선택된 옵션 확정
  }
};

---

5. 결론

React로 Dropdown 컴포넌트를 구현하는 과정에서 상태 관리, 외부 클릭 감지, 옵션 선택 등의 주요 기능을 다뤘습니다. 이 컴포넌트를 기본으로 삼아 다양한 요구사항에 맞게 확장할 수 있습니다. 재사용 가능한 UI 컴포넌트를 설계하고 구현하는 데 이 글이 도움이 되기를 바랍니다.