v-bind를 사용하여 CSS에 대한 Vue3 상태

Photo by Jeffrey Leung on Unsplash.

애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다.

예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 스타일 태그의 CSS 속성에 직접 적용될 수도 있다는 사실을 알고 계셨습니까?

스타일 태그는 동적 CSS 속성 값을 활성화하는 v-bind()라는 CSS 함수와 호환됩니다. 당면한 주제를 더 자세히 살펴 보겠습니다.

<template>
  <div class="custom-wrapper">
    <Box v-for="i in 35" :key="i" />
  </div>  
</template>

<script setup>
import Box from "./components/Box.vue"
</script>

<style scoped>
.custom-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1260px;
  gap: 10px;
}
</style>

App.vue라는 주요 부분의 코드는 위에 나와 있습니다. 아래에서 이 구성 요소의 일부로 Box.vue 파일로 가져오는 App.vue 구성 요소에 대한 코드를 볼 수 있습니다.

<template>
    <div class="custom-box"></div>
</template>

<style scoped>
.custom-box {
    display: inline-flex;
    height: 50px;
    width: 50px;
    background: gray;
}

.is-done {
    background: #ffcd05;
}
</style>

이 구성 요소를 살펴보면 매우 간단합니다. 이 상자를 만들기 위해 클래스div와 일부 스타일이 있는 custom-box만 있으면 됩니다. 이 구성 요소에 몇 가지 동적 CSS 속성 값을 제공하는 방법을 살펴보겠습니다.

먼저 color라는 새 속성을 설정해야 합니다. 이 속성의 기본값은 문자열 값#ffcd05입니다.

<script setup>
defineProps({
    color: {
        type: String,
        default: "#ffcd05"
    },
})
</script>

이제 스타일 태그 내에서 이 속성color을 활용하고 아래와 같이 배경색 속성에 할당할 수 있습니다.

<style scoped>
/* code omitted */
.is-done {
    background: v-bind(color); /* previous value: #ffcd05 */
}
</style>

결과적으로 이제 v-bind() 메서드를 활용하고 color 의 정적 값을 갖는 대신 #ffcd05 속성을 전달할 수 있습니다. 그런 다음 Box 구성 요소는 우리가 속성으로 제공하는 색상을 동적으로 수신합니다.

실제 값이 해시된 사용자 지정 속성으로 어셈블되기 때문에 CSS는 정적으로 유지됩니다. 인라인 스타일은 사용자 지정 속성을 구성 요소의 루트 요소에 적용하는 데 사용되며 소스 값이 변경되면 반응적으로 업데이트됩니다.

결론

v-bind() CSS 함수는 CSS 값을 동적 구성 요소 상태에 연결하기 위한 단일 파일 구성 요소<style> 태그에서 지원됩니다. Vue 구성 요소에서 반응성을 유지하는 재미있고 쉬운 방법입니다.