[Vue.js] 템플릿 문법 및 데이터 바인딩

1. 템플릿 문법이란?

Vue.js의 템플릿은 HTML 기반으로 작성되며, 일반 HTML 태그에 Vue만의 특별한 문법을 추가하여 동적인 콘텐츠를 쉽게 표현할 수 있습니다. 템플릿은 데이터와 DOM을 연결하는 역할을 하며, 사용자 인터페이스(UI)를 구성하는 기본 단위입니다. 대표적으로 보간법이 있습니다.

 

보간법 (Interpolation)

Vue 템플릿 문법의 핵심은 보간법입니다. 이중 중괄호(콧수염 괄호) {{  }} 를 사용해 데이터를 템플릿에 렌더링할 수 있습니다.

<template>
  <div>{{ title }}</div>
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const title = ref('Vue.js 템플릿 문법')
</script>

 

위 코드에서는 title 데이터와 현재 날짜가 동적으로 화면에 렌더링됩니다. 데이터가 변경되면 화면도 즉시 업데이트됩니다.

 

2. 데이터 바인딩이란?

데이터 바인딩은 Vue.js에서 템플릿과 데이터 간의 연결을 말합니다. Vue.js는 DOM을 직접 조작하지 않고, 데이터와 UI를 동기화하여 효율적으로 업데이트합니다. 

 

데이터 바인딩은 대표적으로 단방향, 양방향이 있습니다.

 

단방향 데이터 바인딩

데이터를 단방향으로 전달하여, 템플릿에 데이터를 렌더링합니다.

<template>
  <img :src="imageUrl" alt="이미지" />
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const imageUrl = ref('https://example.com/image.png')
</script>

 

위 코드에서 :src는 v-bind의 축약형으로, 데이터 imageUrl을 <img> 태그의 src 속성에 바인딩합니다.

 

양방향 데이터 바인딩

v-model 디렉티브를 사용하여 데이터를 양방향으로 동기화합니다.

<template>
  <input v-model="name" placeholder="이름을 입력하세요." />
  <p>안녕하세요, {{ name }}님</p>
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

입력 필드의 값이 바뀌면 name 데이터가 변경되고, 반대로 데이터가 변경되면 입력 필드 값이 즉시 반영됩니다.

 

3. Vue.js 디렉티브의 활용

Vue 템플릿에서 디렉티브는 HTML 태그에 동적인 동작을 부여하는 특별한 속성입니다. v-로 시작하며, 다양한 기능을 제공합니다.

 

조건부 렌더링 (v-if, v-else)

데이터 상태에 따라 요소를 동적으로 보여줍니다.

<template>
  <p v-if="isLoggedIn">환영합니다!</p>
  <p v-else>로그인해주세요.</p>
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const isLoggedIn = ref(false)
</script>

 

isLoggedIn 가 false일 경우

 

isLoggedIn 가 true일 경우

 

리스트 렌더링 (v-for)

배열이나 객체를 반복적으로 렌더링할 때 사용합니다.

<template>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const items = ref(['apple', 'banana', 'melon', 'grape'])
</script>

 

4. 클래스와 스타일 바인딩

HTML의 클래스나 스타일도 데이터를 기반으로 동적으로 설정할 수 있습니다.

클래스 바인딩

<template>
  <div class="main_class" :class="{ active: isActive }">클래스 바인딩</div>
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>
<style scoped>
.main_class {
  color: blue;
}

.main_class.active {
  font-size: 50px;
}
</style>

 

isActive가 false일 경우

 

isActive가 true일 경우

위와 같이 기존의 main_class에 :class를 통해 active 클래스를

isActive의 ture, false값을 기준으로 추가, 제거를 할 수 있습니다.

 

스타일 바인딩

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
    스타일 적용 예제
  </div>
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const textColor = ref('red')
const fontSize = ref(16)
</script>

 

 

5. 템플릿에서 JavaScript 표현식 사용

템플릿에서는 JavaScript 표현식을 사용할 수 있어 데이터를 가공하거나 조건부 로직을 적용할 수 있습니다.

<template>
  <p>{{ count > 0 ? '양수입니다' : '음수입니다' }}</p>
  <p>{{ new Date().toLocaleDateString() }}</p>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(5)
</script>

 

 

블로그를 작성하면서 다시 한번 느낀 점은 Vue.js의 템플릿 문법의 데이터 바인딩은 간결한 문법으로 HTML과 JavaScript를 자연스럽게 연결해주기에 개발자 입장에서 어렵지 않게 접근 할 수 있다는 점이 참 좋은 것 같습니다. 이를 활용하면 데이터와 UI 간의 실시간 동기화도 구현할 수 있으며, 직관적인 개발을 쉽게 도와줄거라 생각합니다!

Vue.js를 처음 접하는 개발자분들이시라면 템플릿 문법의 유연성과 데이터 바인딩의 강력함에 더욱 매력을 느끼지 않을까 싶습니다. 😊