Vue Component 개발 — Switch 버튼

Seungwon Go

Published in

ReturnValues

4 min readJun 17, 2018

자주 사용하게 되는 컴포넌트 중 switch 버튼, 즉 checkbox에 모바일에서 쉽게 사용할 수 있는 형태인 스위치 버튼으로 vue component을 만들어 보겠습니다.

스위치 버튼은 잘 아시는 것 처럼 아래의 이미지에서 status 처럼 yes/no 혹은 true/false 와 같은 값을 저장하기 위해 많이 사용합니다.

우리는 스위치 컴포넌트를 처음부터 개발할것은 아니고, 기존에 자주 사용했던 동일 컴포넌트를 vue 컴포넌트를 변환하려고 합니다.

사용하려는 컴포넌튼 Switchery(http://abpetkov.github.io/switchery/) 라는 컴포넌트이고, 이 컴포넌트를 간단하게 vue 컴포넌트로 만들어서 사용해 보도록 하겠습니다.

먼저 바로 완성된 코드는 아래와 같습니다.

<template>
  <input v-if="checked" type="checkbox" @change="changeSwitcher" checked="checked" />
  <input v-else type="checkbox" @change="changeSwitcher"  />
</template><script>
  var option = {};
  option.color = '#F44336';
  option.secondaryColor = '#dfdfdf';
  option.className = 'switchery';
  option.disabled = false;
  option.disabledOpacity = 0.5;
  option.speed = '0.5s';export default {
    name: 'switchery',
    props: {
      checked: Boolean
    },
    mounted: function() {
      this.switchery = new Switchery(this.$el, option);
    },
    updated() {
      if(this.checked != this.$el.checked) {
        $(this.$el).trigger('click');
      }
    },
    methods: {
      changeSwitcher() {
        this.$emit('change',this.$el.checked);
      }
    }
  }
</script>

위에 코드를 설명하기에 앞서, Switchery를 이용했을때 실제 퍼블리싱되는 html 구조를 살펴보면,

실제 화면상에 보이는 디자인을 담당하는 html 영역과 별개로 위에 빨간색 박스로 보이는것 처럼 input type=”checkbox”를 숨겨놓고, 스위치 버튼을 클릭할때 마다 checkbox를 체크해줬다 해제했다 하게 되는 원리로 동작하게 됩니다.

vue 컴포넌트 개발시 제일 까다로운 부분은 데이터 바인딩 부분입니다. 원래 vue 컴포넌트는 컴포넌트에 바인딩되어 있는 데이터에 변경이 일어나면 이를 UI에 반영을 시켜야 하는데, Swithery를 이용하면 데이터 변경사항이 바로 화면 UI에는 반영이 되지 않는다는것입니다. 그래서 작성된 코드에서 updated() 메소드를 주의깊게 보셔야 합니다. 컴포넌트가 가지고 있는 checked 값과 바인딩 된 데이터 값이 다른경우 강제로 click 이벤트를 실행시켜 UI를 변경해 주고 있는 부분이 확인이 됩니다.

스위치버튼 컴포넌트는 Switchery를 이용하면 위에 부분만 주의해서 개발하면 쉽게 vue 컴포넌트화가 가능합니다.

앞으로 다양한 vue 컴포넌트를 만들것인데, 되도록이면 기존에 자바스크립트로 개발되어져서 많은 개발자들이 사용하고 있는 컴포넌트를 vue 컴포넌트화 하는 식으로 포스팅 하도록 하겠습니다.

Vue Component 개발 — Switch 버튼

Written by Seungwon Go