Vue.js 데이터 바인딩이란?
Vue.js에서 데이터 바인딩(Data Binding)은 데이터와 화면(UI)을 연결하는 중요한 기능입니다. 데이터가 변경되면 자동으로 화면이 업데이트되며, 반대로 사용자의 입력도 데이터에 반영될 수 있습니다.
1. {{ }}을 이용한 단방향 바인딩
단방향 바인딩은 데이터가 한쪽 방향(데이터 → 화면)으로만 흐르는 방식입니다. 가장 기본적인 형태는 {{ }} (머스태시 문법)입니다.
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: '안녕하세요, Vue.js!'
}
}
}).mount('#app');
</script>위 코드를 실행하면 화면에는 “안녕하세요, Vue.js!”가 출력됩니다.
2. v-bind를 이용한 속성 바인딩
HTML 속성에 동적으로 값을 할당하려면 v-bind 디렉티브를 사용합니다.
<img v-bind:src="imageUrl" alt="Vue 로고">또는 간단히 :속성명 형태로 축약할 수도 있습니다.
<img :src="imageUrl" alt="Vue 로고">이렇게 하면 imageUrl의 값이 변경될 때마다 이미지가 자동으로 갱신됩니다.
3. v-model을 이용한 양방향 바인딩
양방향 바인딩은 사용자의 입력을 실시간으로 데이터에 반영하는 기능입니다. 이를 위해 v-model을 사용합니다.
<input v-model="userInput" placeholder="입력하세요">
<p>입력값: {{ userInput }}</p>입력 필드에 값을 입력하면 자동으로 userInput에 반영되며, 동시에 화면도 업데이트됩니다.
4. computed 속성을 활용한 데이터 바인딩
computed 속성은 데이터를 가공하여 반환할 때 유용합니다.
<div id="app">
<p>원본 메시지: {{ message }}</p>
<p>대문자로 변환: {{ upperCaseMessage }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello vue'
};
},
computed: {
upperCaseMessage() {
return this.message.toUpperCase();
}
}
}).mount('#app');
</script>위 코드에서 upperCaseMessage는 message의 값을 자동으로 대문자로 변환하여 화면에 표시합니다.
마무리
이번 글에서는 Vue.js의 다양한 데이터 바인딩 기법을 다루었습니다.
- {{ }}을 이용한 단방향 바인딩
- v-bind를 이용한 속성 바인딩
- v-model을 이용한 양방향 바인딩
- computed 속성을 활용한 데이터 가공
다음 글에서는 이벤트 처리 및 메서드를 다룰 예정입니다. 기대해 주세요! 😊