Vue에서 반응형 Lookup 객체로 라디오그룹, 콤보박스, 체크박스 관리하기

 

안녕하세요, 개발자 여러분! 오늘은 Vue.js에서 v-model을 활용해 반응형으로 라디오그룹, 콤보박스, 체크박스 그룹을 관리하는 방법을 알아보겠습니다. lookup 객체를 정의하고, 이를 반응형 데이터로 만들어 한 페이지에서 세 가지 UI 요소를 모두 사용해보겠습니다.  

 

---

1. 반응형 Lookup 객체의 필요성

Vue에서 v-model을 사용하면 데이터가 UI와 양방향으로 바인딩되며, 반응형으로 동작합니다. lookup 객체를 별도 파일에 정의하더라도, 이를 Vue 컴포넌트에서 반응형으로 활용하려면 reactive 또는 ref를 사용해야 합니다. 이번 예제에서는 reactive를 활용해보겠습니다.

 

728x90

---

2. Lookup 객체 정의

먼저, src/constants/lookups.js 파일에서 lookup 객체를 정의합니다.

// src/constants/lookups.js
const lookup = {
  GENDER_OPTIONS: {
    male: '남성',
    female: '여성',
    other: '기타'
  },
  COLOR_OPTIONS: {
    red: '빨강',
    blue: '파랑',
    green: '초록'
  },
  HOBBY_OPTIONS: {
    reading: '독서',
    gaming: '게임',
    hiking: '등산'
  }
};

export default lookup;

이 객체는 정적인 데이터로, 컴포넌트에서 반응형으로 변환해 사용합니다.

 

---

3. 반응형으로 구현한 Vue 컴포넌트

이제 한 페이지에서 라디오그룹, 콤보박스, 체크박스를 모두 사용하며, reactive를 통해 반응형으로 관리하는 예제를 작성해보겠습니다. Vue 3 Composition API를 사용합니다.

<template>
  <div>
    <!-- 라디오그룹: 성별 -->
    <h3>성별 선택</h3>
    <label v-for="(label, value) in lookup.GENDER_OPTIONS" :key="value">
      <input type="radio" v-model="formData.gender" :value="value" />
      {{ label }}
    </label>
    <p>선택된 성별: {{ formData.gender }}</p>

    <!-- 콤보박스: 색상 -->
    <h3>좋아하는 색상</h3>
    <select v-model="formData.color">
      <option v-for="(label, value) in lookup.COLOR_OPTIONS" :key="value" :value="value">
        {{ label }}
      </option>
    </select>
    <p>선택된 색상: {{ formData.color }}</p>

    <!-- 체크박스 그룹: 취미 -->
    <h3>취미 선택</h3>
    <label v-for="(label, value) in lookup.HOBBY_OPTIONS" :key="value">
      <input type="checkbox" v-model="formData.hobbies" :value="value" />
      {{ label }}
    </label>
    <p>선택된 취미: {{ formData.hobbies }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'; // Vue 3 reactive
import lookup from '@/constants/lookups'; // Lookup 객체 가져오기

export default {
  setup() {
    // 반응형 데이터 정의
    const formData = reactive({
      gender: '',    // 라디오그룹용
      color: '',     // 콤보박스용
      hobbies: []    // 체크박스용
    });

    return {
      formData,
      lookup
    };
  }
};
</script>

<style>
h3 {
  margin-top: 20px;
}
p {
  margin: 10px 0;
}
</style>

---

4. 코드 설명

• reactive 사용: formData 객체를 reactive로 정의해 반응형으로 만듭니다. gender, color, hobbies는 각각 라디오그룹, 콤보박스, 체크박스의 선택값을 저장합니다.
• v-model 활용: 각 UI 요소에 v-model을 사용해 formData와 양방향 바인딩합니다.
• lookup 접근: lookup.GENDER_OPTIONS, lookup.COLOR_OPTIONS, lookup.HOBBY_OPTIONS로 정적 데이터를 가져와 렌더링합니다.

 

728x90

 

5. 동작 방식

• 성별(라디오그룹): "남성", "여성", "기타" 중 하나를 선택하면 formData.gender에 값이 반영됩니다.
• 색상(콤보박스): "빨강", "파랑", "초록" 중 하나를 선택하면 formData.color에 저장됩니다.
• 취미(체크박스): "독서", "게임", "등산" 중 여러 개를 체크하면 formData.hobbies 배열에 추가됩니다.

UI에서 값이 변경될 때마다 <p> 태그에 실시간으로 반영되며, 반응형 특성이 잘 드러납니다.

 

---

6. Lookup 객체를 반응형으로 확장하기 (옵션)

만약 lookup 자체를 반응형으로 만들고 싶다면, 컴포넌트에서 다음과 같이 수정할 수 있습니다.

<script>
import { reactive } from 'vue';
import staticLookup from '@/constants/lookups';

export default {
  setup() {
    const formData = reactive({
      gender: '',
      color: '',
      hobbies: []
    });

    // lookup을 반응형으로 변환 (필요 시)
    const lookup = reactive(staticLookup);

    return {
      formData,
      lookup
    };
  }
};
</script>

이렇게 하면 lookup 객체의 값이 동적으로 변경될 때도 UI에 반영됩니다. 예를 들어, 런타임에 lookup.COLOR_OPTIONS에 새로운 색상을 추가하면 자동으로 드롭다운에 표시됩니다.

 

---

7. 마무리

Vue에서 v-model과 reactive를 사용해 반응형으로 lookup 객체를 관리하면, 라디오그룹, 콤보박스, 체크박스 그룹을 깔끔하고 실시간으로 관리할 수 있습니다. lookup을 정적 데이터로 유지하면서도, formData를 반응형으로 처리해 UI와 데이터를 완벽히 동기화했습니다. 여러분의 프로젝트에 이 방식을 적용해보세요!