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

참조) 클래스와 스타일 바인딩 | Vue.js (vuejs.org)

클래스와 스타일 바인딩 | Vue.js

클래스와 스타일 모두 속성이므로 v-bind를 이용하여 처리할 수 있다.

Vue는 v-bind가 class와 style과 함께 사용될 때 특별한 개선사항을 제공한다.

HTML 클래스 바인딩

객체 구문

v-bind:class에 객체를 전달하여 클래스를 동적으로 전환할 수 있다.

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

isActive는 Boolean 데이터로, true일 경우에만 active라는 클래스가 렌더링된다.

isActive가 false 인 경우

isActive가 true인 경우

class라는 속성 자체는 렌더링이 되어있지만 active라는 속성은 그렇지 않은 것을 확인할 수 있다.

 

:class 지시문은 class 속성과 공존이 가능하다.

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

data() {
  return {
    isActive: true,
    hasError: false
  }
}

이런 상황에서 렌더링의 결과는 다음과 같다.

<div class="static active"></div>

isActive와 hasError의 상태에 따라 클래스 목록이 업데이트 된다.

 

바인딩 된 객체는 인라인일 필요는 없다. 즉 data나 computed에 선언된 데이터를 이용할 수도 있다.

data에 선언된 데이터 활용:

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

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

computed에 선언된 데이터 활용:

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

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

배열 구문

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

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

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

이 항목은 다음처럼 렌더링 된다.

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

조건부로 목록의 클래스도 전환하려면 삼항 표현식을 사용한다.

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

여러개의 조건부 클래스가 있다면 복잡하므로, 배열 구문 내에서 객체 구문을 사용할 수 있다.

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

컴포넌트에서 사용하기

단일 루트 엘리먼트 컴포넌트

단일 루트 엘리먼트가 있는 커스텀 컴포넌트에서 class 속성을 사용하면 해당 클래스가 이 엘리먼트에 추가된다.

이 엘리먼트의 기존 클래스는 덮어쓰지 않는다.

컴포넌트 선언 예시:

const app = Vue.createApp({})

app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})

컴포넌트 사용 예시:

<div id="app">
  <my-component class="baz boo"></my-component>
</div>

렌더링 결과:

<p class="foo bar baz boo">Hi</p>

 

클래스 바인딩을 이용해도 결과는 동일하다.

<my-component :class="{ active: isActive }"></my-component>

isActive가 참일 경우 렌더링 결과:

<p class="foo bar active">Hi</p>

다중 루트 엘리먼트 컴포넌트

루트 엘리먼트가 여러개 존재하는 경우, 이 클래스를 받을 컴포넌트를 정의해야한다.

$attrs 컴포넌트 속성을 이용한다.

<div id="app">
  <my-component class="baz"></my-component>
</div>

const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

참고) Non-Prop 속성 | Vue.js (vuejs.org)

Non-Prop 속성 | Vue.js

 

인라인 스타일 바인딩하기

:style의 객체 구문은 간단하다. CSS와 거의 유사.

CSS 속성 이름으로는 카멜케이스(camelCase) 또는 케밥 케이스(kebab-case, 케밥케이스와 함께 따옴표 사용)를 사용할 수 있다.

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

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

font-size 대신에 fontSize라는 이름이 사용된 것을 볼 수 있다.

 

더 깔끔한 템플릿을 위해 스타일 객체에 직접 바인딩을 하는것이 좋다.

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

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

배열 구문

만약 여러 스타일 객체를 적용하고 싶은 경우에는 배열 데이터를 이용한다.

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