[Vue] 체크박스 컴포넌트 만들기

지난 글에서 라디오 그룹 컴포넌트를 만들었다.
이전글에서 언급했듯이 설문지에는 라디오 그룹이 있다면 체크박스도 당연히 있기 마련이다. input-label의 두번째 짝꿍 체크박스도 이참에 기본 컴포넌트로 만들어야 겠다고 생각했다.

체크박스 컴포넌트 만들기

라디오 그룹 컴포넌트 예제로 있던 dataItems가 petArray 데이터라고 할 때, 체크박스 선택 형태로 변환하기 쉽게 만들고자 한다.

// petArray=[{value : 'Dog', label: '강아지'},{value : 'Cat', label: '고양이'},{value : 'Bear', label: '곰'}]

// Main.vue
<base-radio-group
	:data-items="petArray"
    v-model="petAns">
</base-radio-group>
<base-checkbox
	v-for="petItem in petArray"
    :key="petItem.value"
    :label="petItem.label"
    v-model="petItem.checked">
</base-checkbox>

BaseCheckbox 컴포넌트도 BaseRadioGroup 컴포넌트와 유사하게 개발하였다.

// BaseCheckbox.vue
...
    <input type="checkbox"
           :id="randomId"
           :name="randomName"
           :checked="checked"
           @change="$emit('m-change', $event.target.checked)"
    >
    <label :for="randomId">{{label}}</label>
...
<script>
...
  model: {
    prop: 'checked',
    event: 'm-change'
  },
  props: {
    checked : {
      type : Boolean,
    },
    label : {
      type : String,
      default : ''
    },
  },
  mounted () {
    this.randomId = Math.random() * 1000000000000
    this.randomName = Math.random() * 1000000000000
  }
...
</script>

이 외의 disabled나 click event도 마찬가지로 추가하여 사용성을 더 확장 할 수 있다.
위 예제는 라디오그룹->체크박스 형태로 바꾸는 경우라서 반복문을 사용하였는데, 코드를 보면 알 수 있듯이 단일체크박스 형태를 그저 반복문으로 표현 한 것 뿐이다.

<base-checkbox
    label="동의합니다."
    v-model="isAgree">
</base-checkbox>

이처럼 단일 체크박스일 때도 간편하게 사용 가능하다.