실전 코드로 배우는 Vue.js

156

실전 코드로 배우는 Vue.js

예제

3-39

headerClasses

객체를 이용한 동적 클래스 바인딩

<!-- HeadingComponent.vue -->

<template>

<h1 :class="headerClasses.heading">{{title}}</h1>

<p :class="headerClasses.description">{{description}}</p>

</template>

NOTE

컴포넌트에

<script setup>

또는

setup()

함수가 있다면 내부에서

useCssModule()

훅으로

스타일 객체 인스턴스에 접근할 수 있다. 이 함수는 스타일 객체명을 인수로 받는다.

이제 컴포넌트는

style

태그에

scoped

속성을 적용했을 때보다 한층 격리된

isolated

구조를 띤

다. 코드는 더욱 체계화되었지만 외부에서 컴포넌트 스타일을 오버라이딩하기는 어려워졌

다.

Vue

가

CSS

선택자에 무작위 해시를 대입하기 때문이다. 컴포넌트의 구조적 우위는 결국

프로젝트의 요구 사항에 달려있다. 때에 따라서는 원하는 결과를 얻기 위해

scoped

속성과

module

속성을 병용할 수도 있음을 명심하기 바란다.

정리정리

이번 장에서는

SFC

표준에 따라

Vue

컴포넌트를 생성하고

defineComponent

()

로

Vue

애

플리케이션에 타입스크립트를 ...