Alpine.js : 종속형 Select Box 구현

Your new, lightweight, JavaScript framework.

Alpine.js를 활용한 종속형 Select Box 구현

이번 시간에는 Alpine.js를 사용하여 3개의 Select Box를 만들고, 첫 번째 Select Box의 값에 따라 두 번째 Select Box의 옵션이 바뀌고, 두 번째 Select Box의 값에 따라 세 번째 Select Box의 옵션이 바뀌는 기능을 구현해 보겠습니다. 또한, 첫 번째 Select Box의 값이 변경되면 두 번째와 세 번째 Select Box는 초기화되도록 만들어 보겠습니다.

핵심 개념:

Alpine.js: 간단하고 강력한 JavaScript 프레임워크로, HTML에 직접 JavaScript 동작을 추가할 수 있습니다.
x-data: Alpine.js 컴포넌트의 데이터를 정의합니다. 이 데이터는 HTML 요소와 상호작용할 수 있습니다.
x-model: HTML 요소의 값과 Alpine.js 데이터 속성을 양방향으로 바인딩합니다. Select Box에서 선택된 값이 자동으로 JavaScript 변수에 저장되고, JavaScript 변수의 값이 바뀌면 Select Box의 선택된 값도 바뀝니다.
x-for: JavaScript 배열의 각 항목에 대해 HTML 요소를 반복하여 생성합니다. Select Box의 옵션들을 동적으로 생성하는 데 사용됩니다.
x-on:change: 특정 HTML 이벤트(여기서는 change 이벤트, 즉 Select Box의 값이 변경될 때 발생)가 발생했을 때 실행할 JavaScript 함수를 정의합니다.

HTML 구조:

먼저 기본적인 HTML 구조를 만들어 보겠습니다. 3개의 <select> 태그를 감싸는 <div>를 만들고, Alpine.js를 사용할 것이므로 x-data 속성을 추가합니다.

실행 결과:

코드를 HTML 파일에 저장하고 웹 브라우저로 열면, 다음과 같은 동작을 확인할 수 있습니다.

첫 번째 Select Box에서 "과일"을 선택하면, 두 번째 Select Box에는 "사과", "바나나", "오렌지" 옵션이 나타납니다.
두 번째 Select Box에서 "사과"를 선택하면, 세 번째 Select Box에는 "빨간 사과", "푸른 사과" 옵션이 나타납니다.
다시 첫 번째 Select Box에서 "채소"를 선택하면, 두 번째와 세 번째 Select Box는 "선택하세요"로 초기화되고, 두 번째 Select Box에는 "당근", "브로콜리", "오이" 옵션이 나타납니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.js 종속형 Select Box</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="{
        categories: [
            { value: 'fruit', label: '과일' },
            { value: 'vegetable', label: '채소' },
            { value: 'drink', label: '음료' }
        ],
        subCategories: {
            'fruit': [
                { value: 'apple', label: '사과' },
                { value: 'banana', label: '바나나' },
                { value: 'orange', label: '오렌지' }
            ],
            'vegetable': [
                { value: 'carrot', label: '당근' },
                { value: 'broccoli', label: '브로콜리' },
                { value: 'cucumber', label: '오이' }
            ],
            'drink': [
                { value: 'water', label: '물' },
                { value: 'juice', label: '주스' },
                { value: 'soda', label: '탄산음료' }
            ]
        },
        items: {
            'apple': ['빨간 사과', '푸른 사과'],
            'banana': ['달콤한 바나나', '작은 바나나'],
            'orange': ['신선한 오렌지', '제주 오렌지'],
            'carrot': ['단단한 당근', '미니 당근'],
            'broccoli': ['유기농 브로콜리', '냉동 브로콜리'],
            'cucumber': ['아삭한 오이', '백오이'],
            'water': ['생수', '탄산수'],
            'juice': ['오렌지 주스', '사과 주스'],
            'soda': ['콜라', '사이다']
        },
        selectedCategory: '',
        selectedSubCategory: '',
        selectedItem: '',
        filteredSubCategories: [],
        filteredItems: []
    }">
        <div>
            <label for="category">카테고리:</label>
            <select id="category" x-model="selectedCategory" @change="selectedSubCategory = ''; selectedItem = ''; filteredSubCategories = subCategories[selectedCategory] || []; filteredItems = []">
                <option value="">선택하세요</option>
                <template x-for="category in categories" :key="category.value">
                    <option :value="category.value" x-text="category.label"></option>
                </template>
            </select>
        </div>

        <div style="margin-top: 10px;">
            <label for="subCategory">세부 카테고리:</label>
            <select id="subCategory" x-model="selectedSubCategory" @change="selectedItem = ''; filteredItems = items[selectedSubCategory] || []">
                <option value="">선택하세요</option>
                <template x-for="subCategory in filteredSubCategories" :key="subCategory.value">
                    <option :value="subCategory.value" x-text="subCategory.label"></option>
                </template>
            </select>
        </div>

        <div style="margin-top: 10px;">
            <label for="item">품목:</label>
            <select id="item" x-model="selectedItem">
                <option value="">선택하세요</option>
                <template x-for="item in filteredItems" :key="item">
                    <option :value="item" x-text="item"></option>
                </template>
            </select>
        </div>

        <div style="margin-top: 20px;">
            선택된 카테고리: <span x-text="selectedCategory"></span><br>
            선택된 세부 카테고리: <span x-text="selectedSubCategory"></span><br>
            선택된 품목: <span x-text="selectedItem"></span>
        </div>
    </div>
</body>
</html>

개발자를 위한 추가 설명:

데이터의 구조화: categories, subCategories, items와 같이 데이터를 JavaScript 객체나 배열로 구조화하는 것은 웹 개발에서 매우 중요합니다. 이렇게 하면 데이터를 체계적으로 관리하고, 필요에 따라 쉽게 접근하고 사용할 수 있습니다.
이벤트 핸들링: @change와 같이 특정 이벤트가 발생했을 때 원하는 동작을 실행하도록 하는 것은 사용자 인터랙션을 처리하는 기본적인 방법입니다.
양방향 바인딩 (x-model): x-model을 사용하면 HTML 요소의 값과 JavaScript 변수를 연결하여, 한쪽이 변경되면 다른 쪽도 자동으로 업데이트됩니다. 이는 사용자 입력과 애플리케이션 상태를 동기화하는 데 매우 편리합니다.
조건부 렌더링 (Implicit in x-for with filtered data): x-for를 사용하여 배열의 내용에 따라 HTML 요소를 동적으로 생성하는 것은 매우 강력한 기능입니다. 여기서는 filteredSubCategories와 filteredItems를 사용하여 조건에 맞는 옵션들만 보여지도록 구현했습니다.

웹 서비스를 호출하는 방식으로 변경해 보겠습니다. 이번에는 서버에서 데이터를 비동기적으로 가져와서 Select Box의 옵션을 채우게 됩니다.

핵심 변경 사항:

데이터 구조 변경: 더 이상 categories, subCategories, items를 미리 정의하지 않습니다. 대신 서버에서 받아온 데이터를 저장할 변수를 사용합니다.
API 호출 함수: 각 Select Box의 데이터를 가져오는 JavaScript 함수를 만듭니다. Workspace API를 사용하여 서버에 요청을 보냅니다.
로딩 및 에러 처리: API 호출이 완료될 때까지 로딩 상태를 표시하고, 에러가 발생했을 경우 사용자에게 알립니다.
x-init 활용: Alpine.js 컴포넌트가 초기화될 때 첫 번째 Select Box의 데이터를 가져오도록 x-init을 사용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.js 웹 서비스 호출 종속형 Select Box</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="{
        categories: [],
        subCategories: [],
        items: [],
        selectedCategory: '',
        selectedSubCategory: '',
        selectedItem: '',
        categoryLoading: false,
        subCategoryLoading: false,
        itemLoading: false,
        categoryError: null,
        subCategoryError: null,
        itemError: null,

        // 첫 번째 Select Box 데이터 가져오기
        loadCategories() {
            this.categoryLoading = true;
            this.categoryError = null;
            fetch('/api/categories') // 실제 API 엔드포인트로 변경해야 합니다.
                .then(response => {
                    if (!response.ok) {
                        throw new Error('카테고리 데이터를 불러오는 데 실패했습니다.');
                    }
                    return response.json();
                })
                .then(data => {
                    this.categories = data;
                    this.categoryLoading = false;
                })
                .catch(error => {
                    this.categoryError = error.message;
                    this.categoryLoading = false;
                });
        },

        // 두 번째 Select Box 데이터 가져오기
        loadSubCategories() {
            if (!this.selectedCategory) {
                this.subCategories = [];
                return;
            }
            this.subCategoryLoading = true;
            this.subCategoryError = null;
            this.subCategories = []; // 이전 데이터 초기화
            this.selectedSubCategory = ''; // 두 번째 Select Box 초기화
            this.selectedItem = ''; // 세 번째 Select Box 초기화
            this.items = []; // 세 번째 Select Box 데이터 초기화
            this.itemError = null;

            fetch(`/api/subcategories?category=${this.selectedCategory}`) // 실제 API 엔드포인트로 변경해야 합니다.
                .then(response => {
                    if (!response.ok) {
                        throw new Error('세부 카테고리 데이터를 불러오는 데 실패했습니다.');
                    }
                    return response.json();
                })
                .then(data => {
                    this.subCategories = data;
                    this.subCategoryLoading = false;
                })
                .catch(error => {
                    this.subCategoryError = error.message;
                    this.subCategoryLoading = false;
                });
        },

        // 세 번째 Select Box 데이터 가져오기
        loadItems() {
            if (!this.selectedSubCategory) {
                this.items = [];
                return;
            }
            this.itemLoading = true;
            this.itemError = null;
            this.items = []; // 이전 데이터 초기화
            this.selectedItem = ''; // 세 번째 Select Box 초기화

            fetch(`/api/items?subcategory=${this.selectedSubCategory}`) // 실제 API 엔드포인트로 변경해야 합니다.
                .then(response => {
                    if (!response.ok) {
                        throw new Error('품목 데이터를 불러오는 데 실패했습니다.');
                    }
                    return response.json();
                })
                .then(data => {
                    this.items = data;
                    this.itemLoading = false;
                })
                .catch(error => {
                    this.itemError = error.message;
                    this.itemLoading = false;
                });
        },

        // 컴포넌트 초기화 시 첫 번째 Select Box 데이터 로드
        init() {
            this.loadCategories();
        }
    }">
        <div>
            <label for="category">카테고리:</label>
            <select id="category" x-model="selectedCategory" @change="loadSubCategories()" :disabled="categoryLoading">
                <option value="">선택하세요</option>
                <template x-for="category in categories" :key="category.value">
                    <option :value="category.value" x-text="category.label"></option>
                </template>
            </select>
            <template x-if="categoryLoading">
                <span>로딩 중...</span>
            </template>
            <template x-if="categoryError">
                <span style="color: red;" x-text="categoryError"></span>
            </template>
        </div>

        <div style="margin-top: 10px;">
            <label for="subCategory">세부 카테고리:</label>
            <select id="subCategory" x-model="selectedSubCategory" @change="loadItems()" :disabled="subCategoryLoading || !selectedCategory">
                <option value="">선택하세요</option>
                <template x-for="subCategory in subCategories" :key="subCategory.value">
                    <option :value="subCategory.value" x-text="subCategory.label"></option>
                </template>
            </select>
            <template x-if="subCategoryLoading">
                <span>로딩 중...</span>
            </template>
            <template x-if="subCategoryError">
                <span style="color: red;" x-text="subCategoryError"></span>
            </template>
        </div>

        <div style="margin-top: 10px;">
            <label for="item">품목:</label>
            <select id="item" x-model="selectedItem" :disabled="itemLoading || !selectedSubCategory">
                <option value="">선택하세요</option>
                <template x-for="item in items" :key="item">
                    <option :value="item" x-text="item"></option>
                </template>
            </select>
            <template x-if="itemLoading">
                <span>로딩 중...</span>
            </template>
            <template x-if="itemError">
                <span style="color: red;" x-text="itemError"></span>
            </template>
        </div>

        <div style="margin-top: 20px;">
            선택된 카테고리: <span x-text="selectedCategory"></span><br>
            선택된 세부 카테고리: <span x-text="selectedSubCategory"></span><br>
            선택된 품목: <span x-text="selectedItem"></span>
        </div>
    </div>
</body>
</html>

코드 변경 상세 설명:

데이터 속성 추가:
- categoryLoading, subCategoryLoading, itemLoading: API 호출 중임을 나타내는 불리언 값입니다.
- categoryError, subCategoryError, itemError: API 호출 실패 시 에러 메시지를 저장하는 변수입니다.
loadCategories() 함수:
- this.categoryLoading = true;: 로딩 상태를 true로 설정합니다.
- Workspace('/api/categories'): /api/categories 엔드포인트로 GET 요청을 보냅니다. 주의: 실제 웹 서비스의 API 엔드포인트로 변경해야 합니다.
- .then(...): API 호출이 성공하면 응답을 처리합니다.
  - response.ok: HTTP 상태 코드가 200번대인지 확인합니다.
  - response.json(): 응답 데이터를 JSON 형식으로 파싱합니다.
  - this.categories = data;: 파싱된 카테고리 데이터를 categories 배열에 저장합니다.
  - this.categoryLoading = false;: 로딩 상태를 false로 설정합니다.
- .catch(...): API 호출이 실패하면 에러를 처리합니다.
  - this.categoryError = error.message;: 에러 메시지를 categoryError 변수에 저장합니다.
  - this.categoryLoading = false;: 로딩 상태를 false로 설정합니다.
loadSubCategories() 함수:
- 첫 번째 Select Box의 값이 선택되지 않았으면 세부 카테고리 목록을 비우고 함수를 종료합니다.
- 로딩 상태 및 에러를 초기화하고, 이전 선택 값과 데이터를 초기화합니다.
- Workspace(/api/subcategories?category=${this.selectedCategory}): /api/subcategories 엔드포인트로 GET 요청을 보내면서, 선택된 카테고리 값을 쿼리 파라미터로 전달합니다. 주의: 실제 API 엔드포인트로 변경해야 합니다.
- 응답 처리 방식은 loadCategories()와 유사합니다.
loadItems() 함수:
- 두 번째 Select Box의 값이 선택되지 않았으면 품목 목록을 비우고 함수를 종료합니다.
- 로딩 상태 및 에러를 초기화하고, 이전 선택 값을 초기화합니다.
- Workspace(/api/items?subcategory=${this.selectedSubCategory}): /api/items 엔드포인트로 GET 요청을 보내면서, 선택된 세부 카테고리 값을 쿼리 파라미터로 전달합니다. 주의: 실제 API 엔드포인트로 변경해야 합니다.
- 응답 처리 방식은 loadCategories()와 유사합니다.
init() 함수:
- Alpine.js 컴포넌트가 초기화될 때 자동으로 실행되는 함수입니다. 여기서 loadCategories()를 호출하여 첫 번째 Select Box의 데이터를 가져옵니다.
HTML 수정:
- 첫 번째 Select Box의 @change 이벤트 핸들러를 loadSubCategories()로 변경합니다.
- 두 번째 Select Box의 @change 이벤트 핸들러를 loadItems()로 변경합니다.
- 각 Select Box에 :disabled 속성을 추가하여 데이터 로딩 중이거나 이전 Select Box가 선택되지 않았을 때 비활성화합니다.
- 로딩 중 상태와 에러 메시지를 표시하는 부분을 추가했습니다. <template x-if="categoryLoading">...</template>와 같은 형태로 구현했습니다.

// /api/categories 응답 예시
[
    { "value": "fruit", "label": "과일" },
    { "value": "vegetable", "label": "채소" },
    { "value": "drink", "label": "음료" }
]

// /api/subcategories?category=fruit 응답 예시
[
    { "value": "apple", "label": "사과" },
    { "value": "banana", "label": "바나나" },
    { "value": "orange", "label": "오렌지" }
]

// /api/items?subcategory=apple 응답 예시
[
    "빨간 사과",
    "푸른 사과"
]

이제 이 HTML 파일을 웹 브라우저로 열면, 페이지가 로드될 때 /api/categories를 호출하여 첫 번째 Select Box의 옵션을 채웁니다. 첫 번째 Select Box의 값을 변경하면 /api/subcategories를 호출하여 두 번째 Select Box의 옵션을 채우고, 두 번째 Select Box의 값을 변경하면 /api/items를 호출하여 세 번째 Select Box의 옵션을 채우는 방식으로 동작하게 됩니다.

저작자표시 비영리 동일조건

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

Bootstrap v5.1.0 : AJAX 에서 modal 창 사용 방법 (0)	2025.03.11
JavaScript : 부동소수점 연산 오차 문제와 해결 방법 (1)	2025.03.07
JavaScript : Hoisting(호이스팅) 최상단으로 끌어올려지는 현상 알아보자 (0)	2025.03.05
사용자 이미지 업로드(JavaScript) -> Google Cloud Vision API 로 이미지 분석 (1)	2024.11.20
JS : 오늘, 내일 날씨 및 온도 구현하기 (openweathermap 활용) (1)	2024.10.31

재우니의 블로그