[Vue.JS] 클래스와 스타일 바인딩

이번 포스트에서는 컴포넌트에 클래스를 바인딩하는 방법과 인라인 스타일을 사용하는 방법을 이야기 하려고 합니다. 스타일을 적용할 때 클래스와 인라인 스타일이 많이 사용되기 때문에, 이번 포스트는 컴포넌트에 스타일을 적용하는 방법을 이야기 한다고 보셔도 될 것 같습니다.

1. HTML 클래스 바인딩

객체로 클래스를 바인딩 하는 방법, 배열로 클래스를 사용하는 방법, 컴포넌트와 함께 사용하는 방법 3가지를 이야기 하도록 하겠습니다.

객체 구문

클래스를 동적으로 바인딩하기 위해서는 v-bind:class(약어 :class)를 사용하면 됩니다. :class에 객체를 전달해서 클래스를 바인딩 할 수 있습니다.

<div :class="{ active: isActive }"></div>

위 예제에서 isActive가 true일 경우 active 클래스가 바인딩 됩니다. 객체를 이용하여 여러 클래스를 바인딩 할 수 있습니다. 또한 일반 class 속성과 함께 사용할 수 있습니다.

<div class="static"
     :class="{ active: isActive, 'text-danger': hasError }">
</div>

위의 예제처럼 class와 :class를 함께 사용 할 수 있으며, :class에 객체를 넘겨주어 여러 클래스를 바인딩 할 수 있습니다. :class에 넘겨준 객체의 값 중 isActive가 true, hasError가 false 일 때, <div class="static active"></div>와 같이 랜더링 됩니다.

isActive와 hasError의 값이 업데이트 되면, 바인딩 되는 클래스도 따라 업데이트 됩니다. hasError가 true가 된다면 <div class="static active text-danger"></div>가 랜더링 됩니다.

:class에 바인딩 되는 객체는 반드시 인라인일 필요는 없습니다.

<div :class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

위의 예제와 같이 data를 사용하여 클래스를 바인딩 할 수 있습니다. data 뿐만 아니라 computed를 이용하여 클래스를 바인딩 할 수도 있습니다.

<div :class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

위의 예제와 같이 computed를 사용하여 클래스를 바인딩 할 수도 있습니다.

CodePen에서 객체로 클래스 바인딩 하는 예제를 확인 할 수 있습니다.

배열 구문

:class에 배열을 전달하여 클래스를 바인딩 할 수 있습니다.

<div :class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

위의 예제는 <div class="active text-danger"></div>로 랜더링 됩니다. 배열에 있는 클래스를 조건부 랜더링을 하고 싶다면 삼항 연산자를 이용하면 됩니다.

<div :class="[isActive ? activeClass : '', errorClass]"></div>

위의 예제는 errorClass를 항상 비인딩 되며, isActive가 true일 때에만 activeClass가 바인딩 됩니다.

<div :class="[{ active: isActive }, errorClass]"></div>

위의 예제와 같이 배열 구문안에 객체 구문을 함께 사용할 수도 있습니다.

CodePen에서 배열로 클래스 바인딩 하는 예제를 확인 할 수 있습니다.

컴포넌트와 함께 사용하는 방법

사용자 정의 컴포넌트에서 class 속성을 사용하면, 컴포넌트의 루트 엘리먼트에 class가 추가 됩니다.

<div id="app">
  <Child class="baz boo"></Child>
</div>

const Child = {
  template: '<div class="foo bar">Child</div>',
}

new Vue({
  el: '#app',
  components: {
    Child
  }
});

위의 예제는 <Child />는 <div class="foo bar baz boo">Child</div>로 랜더링 됩니다. :class 바인딩도 동일하게 사용할 수 있습니다.

<div id="app">
  <Child :class="{ active: isActive }"></Child>
</div>

const Child = {
  template: '<div class="foo bar">Child</div>',
}

new Vue({
  el: '#app',
  data: {
    isActive: true
  },
  components: {
    Child
  }
});

위의 예제에서 isActive가 true 일 경우, <div class="foo bar active">Child</div>로 랜더링 됩니다.

CodePen에서 컴포넌트와 함께 클래스 바인등 하는 예제를 확인 할 수 있습니다.

2. 인라인 스타일 바인딩

v-bind:style(약어 :style)을 사용하여 인라인 스타일을 적용 할 수 있습니다. :style에 객체 혹은 배열을 넘겨주어 사용할 수 있습니다.

객체 구문

:style에 객체를 넘겨 주어 인라인 스타일을 사용 할 수 있습니다. 넘겨주는 객체의 속성 이름으로 camalCase와 kebab-case를 사용 할 수 있습니다.

<div id="app">
  <div :style="{ color: activeColor, 'font-size': fontSize + 'px' }">인라인 스타일 바인딩</div>
</div>

new Vue({
  el: '#app',
  data: {
    activeColor: 'red',
    fontSize: 30
  }
});

위의 예제 처럼 :style에 객체를 직접 바인딩 하여 사용 할 수도 있습니다.

<div id="app">
  <div :style="styleObject">인라인 스타일 바인딩</div>
</div>

new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
});

위의 예제와 같이 data를 사용하여 인라인 스타일을 적용 할 수도 있습니다. :class와 동일하게 computed를 사용하여 인라인 스타일을 적용 할 수도 있습니다.

<div id="app">
  <div :style="computedStyleObject">인라인 스타일 바인딩</div>
</div>

new Vue({
  el: '#app',
  data: {
    activeColor: 'red',
    fontSize: 30,
  },
  computed: {
    computedStyleObject() {
      return {
        color: this.activeColor,
        fontSize: this.fontSize + 'px'
      };
    }
  }
});

위의 예제와 같이 computed를 사용하여 인라인 스타일을 바인딩 할 수도 있습니다.

CodePen에서 객체로 인라인 스타일을 바인딩하는 예제를 확인 할 수 있습니다.

배열 구문

:style에 배열을 넘겨주어 여러개의 스타일 객체를 사용하 수 있습니다.

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">배열 구문</div>
</div>

new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'red',
      fontSize: '13px'
    },
    overridingStyles: {
      backgroundColor: 'black'
    }
  },
}); 

위의 예제는 CodePen에서 결과를 확인 할 수 있습니다.

자동 접두사

:style에 브라우저 벤더 접두어가 필요한 CSS 속성을 사용하면, Vue는 자동으로 브라우저에 맞는 접두어를 감지하여 스타일을 적용합니다.

다중 값 제공

2.3.0 이상의 Vue 버전에서 지원하는 기능입니다. :style에 접두어가 있는 여러 스타일을 배열로 전달 할 수 있습니다.

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

위의 코드와 같이 :style을 사용하면, 배열에 있는 스타일 중 브라우저가 지원하는 마지막 값으로 스타일이 적용됩니다. 위의 코드는 flexbox의 접두어가 붙지 않는 버전을 지원하는 브라우저의 경우 display: flex 스타일이 적용됩니다.

참고

• https://kr.vuejs.org/v2/guide/class-and-style.html