[vue3 공식문서 번역]Essentials.5.Class and Style Bindings

데이터 바인딩을 하는 흔한 필요는 엘리먼트의 클래스 리스트나 인라인 스타일을 조작할 떄이다. 둘 다 어트리뷰트라서, 우리는 그것들을 다루는데 v-bind를 쓸 수 있다: 오직 표현식의 마지막 문자열 계산만 필요하다. 하지만, 문자열에 간섭은 짜증나고 실수하기 쉽다. 그런 연유로, 뷰는 v-bind가 class와 style에 사용될 때 특별히 강화된 기능을 제공한다. 문자열과 더불어, 그 표현식은 객체나 배열을 읽을 수 있다.

 

HTML 클래스 바인딩

- 객체 바인딩

동적 토글 클래스에 :class로(v-bind:class의 약어) 객체를 넘길수 있다.

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

위 구문은 active 클래스의 존재가 isActive 데이터 프로퍼티의 참/거짓에 따라 간주된다는 것을 의미한다.

 

객체안에 좀더 많은 필드를 가져서 토글(on/off)되는 여러개의 클래스를 가질 수 있다. 게다가, :class 지시어는 순수한 class 어트리뷰트와 함께 존재할 수 있다. 다음과 같은 상태가 주어진다:

const isActive = ref(true)
const hasError = ref(false)

그리고 템플릿이 주어진다:

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

이렇게 렌더링된다:

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

isActive나 hasError가 변경될 때, 클래스 리스트는 그에 맞춰 업데이트 될 것이다. 예를 들면, hjasError가 true면 클래스 리스트는 "static active text-danger"이 될것이다.

 

바운드 객체는 inline이 될 필요는 없다:

const classObject = reactive({
  active: true,
  'text-danger': false
})

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

같은 결과가 렌더링 될것이다. 또한, 객체를 리턴하는 computed 프로퍼티를 바인드할 수 있다. 이건 흔하고 강력한 패턴이다:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

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

 

- 배열 바인딩

클래스의 리스트를 적용하기 위해 배열을 :class로 바인딩 할 수 있다.

const activeClass = ref('active')
const errorClass = ref('text-danger')

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

이렇게 렌더링 된다:

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

만약 리스트의 클래스를 선택적으로 토글하길 원한다면, 3진법 표현식으로 할 수 있다.

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

항상 errorClass를 적용하지만, isActive가 true일 때, activeClass가 적용될 것이다.

 

하지만, 여러개의 조건적인 클래스가 있을 때는 좀 장황해보일 수 있다. 그래서 배열 구문안에 객체 구문을 사용할 수 있다:

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

 

- 컴포넌트와 사용

// 이 섹션은 컴포넌트에 대한 지식이 있다고 가정한다. 가볍게 스킵하고 나중에 다시 와라.

 

하나의 루트 엘리먼트인 컴포넌트에서 class어트리뷰트를 사용할 때, 클래스들은 컴포넌트의 루트엘리먼트에 추가될 ㅓㄳ이고, 이미 거기에 존재하는 클래스와 합쳐질 것이다.

 

예를 들면, 만약 다음과 같은 템플릿에 my-component라고 이름붙인 컴포넌트가 있다:

<!-- child component template -->
<p class="foo bar">Hi!</p>

그리고 이걸 사용할 때 몇가지 클래스를 더한다:

<!-- when using the component -->
<my component class="baz boo"></my-compoenent>

렌러링을 이렇게 된다:

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

클래스 바인딩에도 마찬가지다:

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

isActive가 true일 때, 렌더링된 HTML은 이럴거다:

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

컴포넌트가 여러개의 루트 엘리먼트를 가졌다면, 클래스를 어떤 엘리먼트가 받을지 정의해야 한다. $attrs 컴포넌트 프로퍼티를 사용해서 할 수 있다:

<!-- my-component template using $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<my-component class="baz"></my-component>

렌더링 된다:

<p class="baz">Hi!</p>
<span>This is a child component</span>

Fallthrough Attributes 섹션에서 컴포넌트 어트리뷰트 상속에 대해 더 공부할 수 있다.

인라인 스타일 바인딩

객체에 바인딩

:style은 자바스크립트 객체 값에 바인딩을 지원하다 - HTML 엘리먼트의 style 프로퍼티에 상응한다:

const activeColor = ref('red')
const fontSize = ref(30)

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

비록 key에는 카멜케이스가 추천되지만, :style은 케밥케이스 CSS 프로퍼티 key도 지원한다(실제 CSS에 사용되는 것에 상응하는) - 예를들면:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

템플릿이 깨끗해지도록, 스타일 오브젝트를 바인드하는건 종종 좋은 아이디어다.

const styleObject = reactuve({
  color: 'red',
  fontSize: '13px'
})

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

다시, 객제 스타일 바인딩은 객체들을 리턴하는 computed 프로퍼티와 자주 함께 사용된다.

 

배열에 바인딩

여러개의 스타일 객체의 배열로 :style을 바인드 할 수 있다. 이 객체는 합쳐지고, 같은 엘리먼트에 적용된다.

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

 

자동 접두

:style에 벤더 접두사가 필요한 CSS 프로퍼티를 사용할 때, 뷰는 적절한 접두사를 자동적으로 추가한다. 뷰는 현재 브라우저에서 지원하는 스타일 프로퍼티를 찾기위해 런타임에 체킹한다. 특정한 프로퍼티를 지원하지 않는 브라우저가 있다면, 다양한 접두사 변형은 지원하는 것을 찾기위해 테스트 된다.

 

여러 값

스타일 프로퍼티에 여러개의 (접두) 값의 배열을 제공할 수 있다. 예를들어:

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

브라우저가 지원하는 배열에있는 마지막 값을 렌더링한다. 이 예제에서, flexbox의 접두사가 안붙은 버전을 지원하는 브라우저의 dispaly:flex가 렌러딩 될 것이다.