오랜만에 벨로그에 글을 끄적인다.
vue 3.2 에 추가된 기능인데, v-bind
를 사용하여 CSS 에 속성을 상태로 관리가 가능해졌다.
한번 새로운 기능을 맛을보기 위해 프로젝트를 생성해보자. @vue/cli 모듈을 활용하여 프로젝트를 구성해보도록 하겠다.
npm i -g @vue/cli
설치가 완료되었으면 확인을 해보자.
vue --version
버전이 잘 출력되는거 보니 설치가 정상적으로 되었다. 이제는 프로젝트를 생성하자
vue create hello-vue3
Default (Vue3) 를 선택해준다.
1~3분 정도 기다리면, 설치가 완료된다. 해당 디렉토리로 이동 후, npm run serve
로 실행을 해보자.
정상적으로 실행이 되는게 확인이 가능하다. 우리는 3.2 버전에 추가된 기능을 실습해야하기에 package.json 에서 vue 모듈 버전을 확인해보자.
"vue": "^3.0.0"
^(캐럿)으로 설치가 되었기때문에 3.0.0 >= 3.0.0 < 4.0.0
VSCode 에서 위처럼 확인이 되는지는 모르겠지만, webStorm 에서는 확인이 가능하다.(3.2.20 이 설치가 되었다는걸 확인이 가능)
// HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div>{{ colorState }}</div>
<button type="button" @click="toggleColor">toggleColor</button>
</div>
</template>
<script setup>
import {ref, defineProps} from 'vue';
const props = defineProps({
msg: String
});
console.log(props);
const colorState = ref('red');
const toggleColor = () => {
if (colorState.value === 'red') {
colorState.value = 'blue';
} else {
colorState.value = 'red';
}
};
</script>
<style scoped>
.hello h1 {
text-align: center;
color: v-bind(colorState);
}
</style>
color: v-bind(colorState);
가 보이는가?
우리는 이제 저것을 통해 스타일 내부에 상태를 두어서 쉽게 핸들링이 가능하다.
State-Driven CSS Variables
상태기반 CSS 변수라고 불리운다.
이게 SCSS 에서도 그대로 사용이 가능한지는 테스트를 해보지는 않아서 모르겠다.