[Vue3] 클래스와 스타일 바인딩

• 엘리먼트에 데이터를 바인딩하는 이유
  • 클래스 목록과 해당 인라인 스타일을 조작하기 위함이다.

---

1. HTML 클래스 바인딩

1) 객체로 바인딩

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

<script>
export default {
  name: 'App',
  data () {
    return {
      isActive: true,
      hasError: false
    }
  },
}
</script>

• 아래와 같이 렌더링된다.

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

2) 배열로 바인딩

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

<script>
export default {
  name: 'App',
  data () {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  },
}
</script>

• 아래와 같이 렌더링된다.

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

• 삼항 표현식을 통해 클래스를 토글할 수 있다.
• 그러나 조건부 클래스가 여러개이면 가독성이 떨어지므로 배열 구문 내에서 객체 구문을 사용하여 가독성을 올릴 수 있다.

<!-- 삼항 표현식 -->
<div :class="[isActive ? activeClass : '', errorClass]"></div>

<!-- 배열 구문 내에서 객체 구문 사용 -->
<div :class="[{ active: isActive }, errorClass]"></div>

3) 컴포넌트에서 사용하기

• 최상위 엘리먼트가 하나로 구성된 컴포넌트에서 class 속성을 사용하면 해당 클래스가 컴포넌트의 최상위 엘리먼트에 이미 정의된 기존 클래스와 병합되어 추가된다.

<!-- 자식 컴포넌트의 템플릿 -->
<p class="foo bar">안녕!</p>

<!-- 컴포넌트가 사용될 때 -->
<MyComponent class="baz boo" />

• 아래와 같이 렌더링된다.

<p class="foo bar baz boo">안녕!</p>

---

2. 인라인 스타일 바인딩

1) 객체로 바인딩

<template>
  <h1 :style="{ color, fontSize }">컴포넌트</h1>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      color: 'pink',
      fontSize: '30px'
    }
  },
}
</script>

• 객체 자체를 직접 바인딩하면 가독성이 좋아진다.

<template>
  <h1 :style="styleObj">컴포넌트</h1>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      styleObj: {
        color: 'pink',
        fontSize: '30px'
      }
    }
  },
}
</script>

2) 배열로 바인딩

<template>
  <h1 :style="[baseObj, styleObj]">컴포넌트</h1>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      baseObj: {
        fontSize: '30px',
        lineHeight: '40px'
      },
      styleObj: {
        color: 'pink',
      }
    }
  },
}
</script>