React로 2단계(2-tier) Select 구현하기

by

2단계 Select란, 사용자가 두 단계의 선택 요소를 통해 더 구체적인 옵션을 선택할 수 있는 인터페이스를 말합니다. 이 예제에서는 React를 사용하여 시도와 시군구 선택을 구현하는 방법을 알아보겠습니다. 이를 통해 React의 핵심 개념을 익히고, 사용자 인터페이스를 동적으로 조작하는 방법을 이해할 수 있습니다.


데이터 준비

React 컴포넌트에서 사용할 시도와 시군구 데이터를 준비합니다. 아래와 같이 간단한 배열과 객체를 사용하여 데이터를 정의합니다.

const provinces = [
  { id: 1, name: '서울특별시' },
  { id: 2, name: '경기도' },
  { id: 3, name: '인천광역시' },
  // 다른 시도 데이터 추가
];

const districts = {
  서울특별시: ['강남구', '강서구', '송파구', /* ... */],
  경기도: ['수원시', '용인시', '성남시', /* ... */],
  인천광역시: ['중구', '남구', '동구', /* ... */],
  // 다른 시도의 시군구 데이터 추가
};


TwoTierSelect 컴포넌트 작성

이제 React 컴포넌트를 작성합니다. 컴포넌트에서는 선택된 시도와 시군구를 상태(State)로 관리하고, 사용자의 선택에 따라 동적으로 시군구 목록을 업데이트합니다.

import React, { useState } from 'react';

const TwoTierSelect = () => {
  const [selectedProvince, setSelectedProvince] = useState('');
  const [selectedDistrict, setSelectedDistrict] = useState('');
  
  const handleProvinceChange = (e) => {
    setSelectedProvince(e.target.value);
    setSelectedDistrict(''); // 시도 변경 시 시군구 선택 초기화
  };

  const handleDistrictChange = (e) => {
    setSelectedDistrict(e.target.value);
  };

  return (
    <div>
      <h2>2단계(2-tier) Select 구현</h2>
      <div>
        <label htmlFor="province">시도 선택:</label>
        <select id="province" value={selectedProvince} onChange={handleProvinceChange}>
          <option value="">시도를 선택하세요</option>
          {provinces.map((province) => (
            <option key={province.id} value={province.name}>
              {province.name}
            </option>
          ))}
        </select>
      </div>
      {selectedProvince && (
        <div>
          <label htmlFor="district">시군구 선택:</label>
          <select id="district" value={selectedDistrict} onChange={handleDistrictChange}>
            <option value="">시군구를 선택하세요</option>
            {districts[selectedProvince].map((district, index) => (
              <option key={index} value={district}>
                {district}
              </option>
            ))}
          </select>
        </div>
      )}
      <div>
        <p>선택된 시도: {selectedProvince}</p>
        <p>선택된 시군구: {selectedDistrict}</p>
      </div>
    </div>
  );
};

export default TwoTierSelect;


결과 확인

위의 코드를 실행하면 두 단계의 선택 요소를 통해 시도와 시군구를 선택할 수 있는 인터페이스가 생성됩니다. 사용자가 시도를 선택하면 해당 시도에 따라 시군구 목록이 동적으로 업데이트되며, 선택한 값을 화면에 출력할 수 있습니다.


마무리

React를 사용하여 2단계(2-tier) Select를 구현하는 방법을 알아보았습니다. 이러한 선택 요소를 사용하면 다양한 상황에서 사용자가 더 구체적인 옵션을 선택할 수 있습니다. React의 상태(State) 관리와 이벤트 핸들링을 활용하여 동적 UI를 구현하는 연습이 될 것입니다. 다음 프로젝트에서 이러한 기술을 응용하여 더 복잡한 선택 인터페이스를 만들어보세요.



Leave a Comment