[react] 동적 select box 구현하기 (첫번째 항목 선택에 따라 달라지는 다음 선택 목록 구현하기, 지역 선택 박스)

 

 

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

 

 

동적 select box 구현하기

 

 

이번 프로젝트에서 지역, 난이도 선택을 순차적으로 입력할 수 있는 Select Box를 구현했습니다.

선택하는 시도에 따라 하위 주소 선택 목록이 달라지며, 난이도 선택은 별개로 항상 나타나야 했습니다.

일반적인 스크롤 형태의 Select Box가 아니라 목록이 제시되어 있고 클릭할 수 있는 기능을 원했습니다.

 

 

구현 화면

 

 

 

Console

 

 

 

작성 코드

 

 

클릭해야 나타나는 목록이 아니라 목록이 제시되어 있는 형태의 Select Box를 구현하기 위해 목록을 배열 형태로 작성하였습니다.

 

useState를 사용하여 상태를 업데이트하는 함수를 선언하였습니다.

초기 상태로는 첫 번째 시도가 선택되고, 나머지는 빈 문자열로 설정됩니다.

const [selectedProvince, setSelectedProvince] = useState(provinces[0].name);

 

시도 변경 핸들러에서 아래 부분은 시도 선택 시 시군구와 읍면동의 선택을 초기화하는 부분입니다.

        setSelectedDistrict('');
        setSelectedSubdistrict('');

 

 

 

Mselect.jsx

 

import style from './Mselect.module.css';
import React, { useState } from 'react';

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

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

    const subdistrict = {
        강남구: ['능동', '청담동', '대치1동', /* ... */],
        수원시: ['과천동', '정자동', '안양동', /* ... */],
        중구: ['강화읍', '송해면', '문학동', /* ... */],
    }

    const difficulties = ['쉬움', '중간', '어려움'];


    // 상태를 정의합니다.
    const [selectedProvince, setSelectedProvince] = useState(provinces[0].name);
    const [selectedDistrict, setSelectedDistrict] = useState('');
    const [selectedSubdistrict, setSelectedSubdistrict] = useState('');
    const [difficulty, setDifficulty] = useState('');

    // 시도 변경 핸들러
    const handleProvinceChange = (provinceName) => {
        setSelectedProvince(provinceName);
        setSelectedDistrict('');
        setSelectedSubdistrict('');
        // 현재 난이도 상태가 아닌, 직전에 선택된 난이도를 로깅
        console.log(`시도: '${provinceName}', 시군구: '', 읍면동: '', 난이도: '${difficulty}'`);
    };

    // 시군구 변경 핸들러
    const handleDistrictChange = (districtName) => {
        setSelectedDistrict(districtName);
        setSelectedSubdistrict('');
        // 현재 난이도 상태가 아닌, 직전에 선택된 난이도를 로깅
        console.log(`시도: '${selectedProvince}', 시군구: '${districtName}', 읍면동: '', 난이도: '${difficulty}'`);
    };

    // 읍면동 변경 핸들러
    const handleSubdistrictChange = (subdistrictName) => {
        setSelectedSubdistrict(subdistrictName);
        // 현재 난이도 상태가 아닌, 직전에 선택된 난이도를 로깅
        console.log(`시도: '${selectedProvince}', 시군구: '${selectedDistrict}', 읍면동: '${subdistrictName}', 난이도: '${difficulty}'`);
    };

    // 난이도 변경 핸들러
    const handleDifficultyChange = (level) => {
        setDifficulty(level);
        // 새롭게 선택된 난이도를 로깅
        console.log(`시도: '${selectedProvince}', 시군구: '${selectedDistrict}', 읍면동: '${selectedSubdistrict}', 난이도: '${level}'`);
    };

    return (
        <>
            <div className={style.Mselectbox}>
                <div className={style.Mselect_main}>
                    <h1 className={style.Mselect_title}>
                        <img src={`${process.env.PUBLIC_URL}/img/mountainpath.svg`} alt="등산 정보 아이콘" className={style.icon1} />
                        등산 정보</h1>
                </div>
            </div>

            <div className={style.Mselectbox1}>
                <h2>시도 선택</h2>
                <div className={style.scrollableList}>
                    {provinces.map((province) => (
                        <div
                            key={province.id}
                            className={`${style.listItem} ${selectedProvince === province.name ? style.selected : ''}`}
                            onClick={() => handleProvinceChange(province.name)}
                        >
                            {province.name}
                        </div>
                    ))}
                </div>

                {selectedProvince && (
                    <>
                        <h2>시군구 선택</h2>
                        <div className={style.scrollableList}>
                            {districts[selectedProvince]?.map((district, index) => (
                                <div
                                    key={index}
                                    className={`${style.listItem} ${selectedDistrict === district ? style.selected : ''}`}
                                    onClick={() => handleDistrictChange(district)}
                                >
                                    {district}
                                </div>
                            ))}
                            {!districts[selectedProvince] && <div className={style.listItem}>시군구가 없습니다.</div>}
                        </div>

                        <h2>읍면동 선택</h2>
                        <div className={style.scrollableList}>
                            {selectedDistrict && subdistrict[selectedDistrict]?.map((sub, index) => (
                                <div
                                    key={index}
                                    className={`${style.listItem} ${selectedSubdistrict === sub ? style.selected : ''}`}
                                    onClick={() => handleSubdistrictChange(sub)}
                                >
                                    {sub}
                                </div>
                            ))}
                            {!subdistrict[selectedDistrict] && <div className={style.listItem}>읍면동이 없습니다.</div>}
                        </div>

                        <h2>난이도 선택</h2>
                        <div className={style.scrollableList}>
                            {difficulties.map((level, index) => (
                                <div
                                    key={index}
                                    className={`${style.listItem} ${difficulty === level ? style.selected : ''}`}
                                    onClick={() => handleDifficultyChange(level)}
                                >
                                    {level}
                                </div>
                            ))}
                        </div>



                    </>
                )}
            </div>
            <div className={style.Mselect_result}>
                <p>선택된 시도: {selectedProvince}</p>
                <p>선택된 시군구: {selectedDistrict || '선택되지 않음'}</p>
                <p>선택된 읍면동: {selectedSubdistrict || '선택되지 않음'}</p>
                <p>선택된 난이도: {difficulty || '선택되지 않음'}</p>
            </div>
        </>
    );
}

export default Mselect;

 

 

 

 

 

 

 

Mselect.module.css

 

module.css 형태를 사용할 때의 장점은 클래스 이름이 고유하게 변경되어 스타일이 다른 컴포넌트에 영향을 주지 않는다는 것입니다.

 

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.Mselectbox {
    padding-top: 7.5rem;
    justify-content: center;
    align-items: center;
    display: flex;
}

.Mselect_title {
    font-size: 2.5rem;
    display: flex;
    font-family: 'GmarketSansLight';
}

.icon1 {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
}

.selector {
    cursor: pointer;
    /* 추가적인 스타일 */
}

.Mselectbox1 {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    width: 100vw;
}

.scrollableList {
    max-height: 10rem;
    max-width: 15rem;
    overflow-y: auto;
    /* 수직 방향으로만 스크롤 바 표시 */
    border: 0.1rem solid #ccc;
    /* 경계선 스타일 */
    margin-top: 5px;
    /* 상단 여백 */
    margin-right: 2rem;
    margin-left: 1rem;
    width: 100%;
    /* 너비 설정 */
    background: white;
    /* 배경색 */
    z-index: 10;
}

.listItem {
    padding: 10px;
    /* 패딩 */
    cursor: pointer;
    /* 마우스 포인터 변경 */
    border-bottom: 1px solid #eee;
    /* 하단 경계선 스타일 */
}

.listItem:hover {
    background-color: #f7f7f7;
    /* 호버시 배경색 변경 */
}

.selected {
    background-color: #e9ecef;
    /* 예시 색상 */
}

.Mselect_result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

 

 

 

 

 

위와 같은 방식으로 react를 활용하여 동적 Select Box를 구현할 수 있습니다.