1. 데이터 바인딩이란? 왜 배워야 할까?
Vue.js에서 데이터 바인딩(Data Binding) 은 자바스크립트 데이터와 HTML을 연결하는 기능입니다. 즉, 데이터를 한 곳에 저장하고 HTML에 반영하는 방식이죠.
“그냥 HTML에 직접 값을 넣으면 되는 거 아닌가?” 🤔 라고 생각할 수도 있지만, Vue의 데이터 바인딩을 활용하면 실시간 업데이트, 자동 렌더링, 유지보수 용이성 등 많은 이점이 있습니다.
💡 예제 비교:
👇 기본 HTML 방식
html복사편집
<p>상품 가격: 50,000원</p>
위처럼 작성하면 가격이 바뀔 때마다 HTML을 직접 수정해야 합니다.
👇 Vue 데이터 바인딩 방식
html복사편집
<p>상품 가격: {{ price }}원</p>
javascript복사편집
new Vue({
el: "#app",
data: {
price: 50000
}
});
Vue에서는 price 값을 바꾸면 자동으로 화면에 반영됩니다! 🎉
2. Vue 데이터 바인딩 문법: 기본 사용법
Vue에서 데이터를 HTML에 바인딩하는 기본 문법은 {{ }}(중괄호 두 개)입니다.
이를 “Mustache 문법” 이라고도 부릅니다.
📌 예제: 상품명과 가격 바인딩하기
html복사편집
<div id="app">
<h2>{{ productName }}</h2>
<p>가격: {{ price }}원</p>
</div>
javascript복사편집
new Vue({
el: "#app",
data: {
productName: "Vue 강의 패키지",
price: 99000
}
});
✅ data 속성에서 정의한 productName과 price 값이 HTML에 자동 반영됩니다.
✅ 값이 변경되면, 자동으로 화면이 업데이트됩니다.
3. 데이터 바인딩이 중요한 이유
데이터 바인딩을 사용하면 단순히 HTML에 값을 넣는 것 이상의 강력한 기능을 활용할 수 있습니다.
1️⃣ 유지보수 편리성
- HTML에 직접 값을 입력하는 방식보다 데이터를 한 곳에서 관리하기 쉽습니다.
- 예를 들어, 할인 이벤트가 생겼을 때
price값만 바꾸면 모든 화면에서 자동으로 적용됩니다.
2️⃣ 자동 렌더링 (Reactivity)
- Vue는 데이터가 변경되면 자동으로 화면을 업데이트해 줍니다.
- 쇼핑몰에서 가격이 변경될 때, 한 번의 데이터 변경으로 모든 페이지에 즉시 반영됩니다.
💡 자동 렌더링 예제
html복사편집
<div id="app">
<p>현재 가격: {{ price }}원</p>
<button @click="applyDiscount">할인 적용</button>
</div>
javascript복사편집
new Vue({
el: "#app",
data: {
price: 50000
},
methods: {
applyDiscount() {
this.price = this.price * 0.9; // 10% 할인 적용
}
}
});
✅ 버튼을 클릭하면 가격이 자동으로 변경되며 화면도 즉시 업데이트됩니다!
4. 데이터 바인딩 심화: 속성 바인딩 및 스타일 적용
Vue에서는 단순한 값뿐만 아니라, HTML 속성 및 스타일도 데이터 바인딩할 수 있습니다.
📌 속성 바인딩: v-bind
v-bind(줄여서 :)를 사용하면 HTML 속성에도 데이터를 연결할 수 있습니다.
html복사편집
<img :src="imageUrl" alt="상품 이미지">
javascript복사편집
new Vue({
el: "#app",
data: {
imageUrl: "https://example.com/product.jpg"
}
});
✅ imageUrl 값을 변경하면 자동으로 이미지가 변경됩니다.
📌 스타일 바인딩
HTML 요소의 스타일도 동적으로 변경할 수 있습니다.
html복사편집
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">스타일 변경</p>
<button @click="changeStyle">스타일 변경</button>
javascript복사편집
new Vue({
el: "#app",
data: {
textColor: "blue",
fontSize: 16
},
methods: {
changeStyle() {
this.textColor = "red";
this.fontSize = 20;
}
}
});
✅ 버튼을 클릭하면 글자 색과 크기가 자동으로 변경됩니다.
5. 데이터 바인딩 실전 예제: 쇼핑몰 상품 목록 만들기
Vue의 데이터 바인딩을 활용하여 쇼핑몰 상품 리스트를 만들어보겠습니다.
📌 목표: 상품 목록을 동적으로 표시하기
html복사편집
<div id="app">
<h2>상품 목록</h2>
<ul>
<li v-for="product in products" :key="product.id">
{{ product.name }} - {{ product.price }}원
</li>
</ul>
</div>
javascript복사편집
new Vue({
el: "#app",
data: {
products: [
{ id: 1, name: "Vue 강의 패키지", price: 99000 },
{ id: 2, name: "JavaScript 완벽 가이드", price: 59000 },
{ id: 3, name: "React 실전 프로젝트", price: 79000 }
]
}
});
✅ v-for를 사용해 products 배열을 자동으로 반복 출력합니다.
✅ 새로운 상품을 추가하면 HTML을 수정할 필요 없이 자동 반영됩니다.
6. 데이터 바인딩, 언제 사용하고 언제 사용하지 않을까?
Vue의 데이터 바인딩은 강력하지만, 모든 값에 사용할 필요는 없습니다.
📌 데이터 바인딩을 사용해야 하는 경우
✅ 자주 변경되는 값 (예: 상품 가격, 재고 수량, 사용자 입력 값)
✅ 동적으로 업데이트해야 하는 값 (예: 할인 가격, 필터링된 목록)
✅ 사용자와 상호작용하는 요소 (예: 버튼 클릭 시 변화)
📌 데이터 바인딩이 필요 없는 경우
❌ 변경될 일이 거의 없는 값 (예: 로고, 회사 소개 문구)
❌ 고정된 스타일 (CSS 파일에 정의하는 것이 더 효율적)
7. 정리 및 마무리
✅ 데이터 바인딩은 Vue의 핵심 개념으로, 데이터를 HTML에 쉽게 연결할 수 있습니다.
✅ 단순한 값뿐만 아니라 HTML 속성, 스타일, 리스트 등도 바인딩 가능합니다.
✅ Vue의 자동 렌더링 기능을 활용하면 화면을 동적으로 업데이트할 수 있습니다.
✅ 모든 값에 바인딩할 필요는 없으며, 변경이 자주 일어나는 데이터에만 적용하는 것이 좋습니다.
💡 👉 직접 실습해 보세요!
Vue 개발을 시작하려면 직접 코드 작성과 실습이 중요합니다. 오늘 배운 개념을 활용해 작은 프로젝트를 만들어보세요! 🚀