클래스와 스타일 바인딩

Vue.js의 class와 스타일 바인딩에 대한 개념에 대해 알아보도록 합시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. 코드 예시

먼저 아래와 같이 코드를 작성하였습니다. Hello?!라는 h1 태그를 클릭하게 되면 false 값을 갖고 있던 isActive가 activate라는 메소드를 통해 true로 변하게 되는 간단한 코드입니다.

<template>
  <h1 @click="activate">
    Hello?!
  </h1>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    activate() {
      this.isActive = true
    }
  }
}
</script>

2. Class

2.1 Class Binding

이후 아래와 같이 css 속성을 추가해보도록 하겠습니다.

<style scoped>
  .active {
    color: red;
    font-weight: bold;
  }
</style>

그리고 class 속성이 없기 때문에 h1 태그에 css에서 표시한 active라는 값을 할당합니다. 그러나 이것은 데이터이므로 class라는 속성이 데이터를 취급할 수 있도록 v-bind: 디렉티브를 앞쪽에 추가하여 줍니다. 물론 예시와 같이 v-bind:의 약어인 : 콜론만 사용해주셔도 정상적으로 동작합니다.

이러한 class의 객체 데이터인 { active: isActive }를 key와 value 형태로 코딩을 해줍니다. 여기서 입력한 class인 active는 isActive의 영향을 받아 이것의 boolean 데이터 값이 true라면 class가 추가되고 반대라면 그렇지 않은 구조를 만들어낸 것입니다. 이러한 개념이 바로 클래스 바인딩(Class Binding)입니다.

<template>
  <h1 
    :class="{ active: isActive }"
    @click="activate">
    Hello?!({{ isActive }})
  </h1>
</template>

2.2 객체 구문

:class (v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다.

그리고 이와 같이 객체 데이터 형태로 class를 지정하는 것이 바로 객체 구문입니다.

그러나 바인딩된 객체는 인라인일 필요는 없습니다. 연결된 class의 내용이 많은 경우에는 아래와 같은 방식이 더욱 효율적이라 할 수 있습니다.

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

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

또한, 객체를 반환하는 computed property에 바인딩할 수도 있습니다.

2.3 배열 구문

배열을 :class에 전달하여 클래스 목록을 적용할 수도 있습니다.

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

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

이는 다음처럼 렌더링됩니다.

<div class="active text-danger"></div>

일반적으로 유용하다고 보기 어렵지만, 배열을 이용해 데이터를 연결할 수도 있다는 점만 알고 있어도 충분합니다.

3. Inline Style Binding

인라인 스타일 바인딩이란 html에 인라인 방식으로 style 속성을 추가하여 직접적으로 css 내용을 추가하는 것과 유사한 개념입니다. Vue.js에서는 인라인 방식을 통해 style을 추가할 때 데이터를 바인딩하여 작성할 수 있습니다.

3.1 객체 구문

:style의 객체 구문은 매우 간단합니다. JavaScript 객체라는 점을 제외하면 CSS와 거의 비슷합니다.

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

템플릿을 더 깔끔하게 만들기 위해, 스타일 객체에 직접 바인딩하는 것이 좋습니다. 또한, 객체 구문의 객체를 반환하는 computed 속성과 함께 자주 사용됩니다.

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

3.2 배열 구문

:style의 배열 구문을 사용하면, 동일한 요소에 여러 스타일 객체를 적용할 수 있습니다. 여러 개의 객체 데이터를 연결하게 될 때에는 아래와 같이 배열 구문을 활용하게 되니 이 점은 꼭 기억해주시면 좋습니다.

<div :style="[baseStyles, overridingStyles]"></div>