데이터바인딩은 HTML에 자바스크립트 데이터를 꽂아넣는 작업입니다.
Vue에서는 데이터바인딩 문법을 통해 아래 두 가지 방식으로 데이터를 쉽게 HTML에 삽입할 수 있습니다.
1️⃣ 왜 데이터바인딩을 할까요?
- 유지보수의 편리함 쇼핑몰처럼 가격이 자주 변동되는 경우, 데이터를 하드코딩(
<p>60만원</p>)하는 대신 data 보관함에 저장해두면 나중에 수정하기 편리합니다.
- 실시간 렌더링 Vue의 반응형 시스템 덕분에, 데이터가 변경되면 관련 HTML이 자동으로 업데이트되어 웹앱 개발에 유리합니다.
2️⃣ Vue 개발은 어려운 것이 아닙니다
평소 HTML/CSS로 웹페이지 개발하던 방식처럼 작성하고, 필요한 순간에 Vue 문법을 첨가하면 됩니다.
예를 들어, 원룸을 파는 쇼핑몰 레이아웃은 아래와 같이 작성할 수 있습니다.
<template>
<div>
<h4>XX 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
<div>
<h4>XX 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const price1 = ref(60)
</script>
<style>
/* 필요에 따라 스타일 추가 */
</style>
- HTML 코드는
<template>안에 넣고, - 자바스크립트 기능은
<script setup>안에, - 스타일은
<style>안에 작성합니다.
3️⃣ Vue의 데이터바인딩 문법
(1) 기본 데이터바인딩
자바스크립트 변수나 데이터를 HTML에 꽂아넣는 방식입니다.
전통적인 방식은 이렇게 DOM 조작을 직접 했지만:
document.getElementById("어쩌구").innerHTML = 데이터;
Vue에서는 단순히 {{ 데이터 }}를 사용합니다.
예를 들어, 위의 <p>{{ price1 }} 만원</p> 처럼 작성하면 브라우저에 60만원이 출력됩니다.
(2) 데이터 보관함
Vue에서는 중요한 데이터를 data 보관함에 object 형식으로 저장합니다.
Vue3에서는 <script setup>에서 ref를 이용하여 데이터를 정의합니다.
<script setup>
import { ref } from 'vue'
const price1 = ref(60)
</script>
이렇게 정의한 price1을 HTML 중간에 {{ price1 }}로 꽂아넣으면,
만약 price1의 값이 60에서 70으로 변경되더라도 HTML은 실시간으로 업데이트됩니다.
4️⃣ HTML 속성에도 데이터바인딩 가능
Vue에서는 style, id, class 등 모든 HTML 속성에 데이터를 바인딩할 수 있습니다.
바인딩할 때는 속성 앞에 : (콜론)을 붙여줍니다.
예제: <h4> 태그의 style 속성에 데이터를 꽂아넣기
<template>
<div>
<h4 :style="스타일">XX 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
<div>
<h4>XX 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const price1 = ref(60)
const 스타일 = ref('color:red')
</script>
<h4 :style="스타일">와 같이 작성하면,스타일변수에 저장된'color:red'값이 해당 요소의 style 속성에 적용됩니다.
이처럼 상상하는 모든 HTML 속성에 데이터를 꽂아넣어 사용할 수 있습니다.
📌 정리
- 데이터바인딩:
{{ 데이터 }}를 사용해 HTML 중간에 데이터를 쉽게 꽂아넣습니다.
- Reactive Data 관리:
- Vue3에서는
<script setup>과ref를 사용하여 데이터를 선언합니다.
- Vue3에서는
- 실시간 렌더링:
- 데이터가 변경되면 Vue가 관련 HTML을 자동 업데이트합니다.
- HTML 속성 바인딩:
:를 이용해 style, id, class 등에도 데이터를 바인딩할 수 있습니다.
