Vue가 왜 필요한지, 어떤 방식으로 화면을 관리하는지부터 이해하는 것이 중요하다.
이번 글에서는 Vue를 본격적으로 사용하기 전에 알아두면 좋은 기본 개념을 정리한다.
1. Vue.js란
Vue.js는 사용자 화면을 만들기 위한 JavaScript 프레임워크다.
일반적인 HTML과 JavaScript만으로도 웹 화면을 만들 수 있다.
예를 들어 버튼을 누를 때 숫자를 하나 증가시키는 기능을 만든다고 해보자.
<p id="count">0</p>
<button id="button">증가</button>
JavaScript에서는 다음과 같이 DOM을 직접 찾아 수정할 수 있다.
let count = 0;
const countElement = document.querySelector("#count");
const button = document.querySelector("#button");
button.addEventListener("click", () => {
count++;
countElement.textContent = count;
});
동작 자체는 간단하다.
버튼 클릭
↓
count 값 변경
↓
DOM 요소 찾기
↓
textContent 변경
↓
화면 변경
작은 웹 페이지에서는 이런 방식으로도 충분하다.
하지만 화면이 커지고 관리해야 하는 데이터가 많아지면 문제가 생긴다.
사용자 정보 변경
상품 목록 변경
장바구니 변경
로그인 상태 변경
게시글 변경
댓글 변경
데이터가 변경될 때마다 어떤 DOM을 수정해야 하는지 직접 관리해야 하기 때문이다.
Vue는 이 부분을 대신 처리해준다.
데이터 변경
↓
Vue가 변경을 감지
↓
필요한 화면을 갱신
즉 Vue에서는 DOM을 직접 조작하는 것보다 데이터를 중심으로 화면을 관리하는 방식을 사용한다.
2. Vue의 핵심은 데이터와 화면의 연결이다
Vue를 이해할 때 가장 먼저 알아야 하는 것은 반응성(Reactivity)이다.
반응성이란 데이터가 변경되면 그 데이터를 사용하는 화면도 자동으로 변경되는 특징을 의미한다.
예를 들어 다음과 같은 데이터가 있다고 해보자.
const message = ref("Hello Vue");
화면에서는 다음과 같이 사용할 수 있다.
<h1>{{ message }}</h1>
처음 화면에는 다음과 같이 출력된다.
Hello Vue
이후 message 값을 변경하면
message.value = "Vue 공부 중";
화면도 자동으로 변경된다.
Vue 공부 중
개발자가 직접
document.querySelector("h1")
을 이용해 DOM을 찾거나 textContent를 수정하지 않아도 된다.
전체 흐름은 다음과 같다.
message
"Hello Vue"
↓
값 변경
↓
"Vue 공부 중"
↓
Vue가 변경 감지
↓
화면 자동 갱신
이것이 Vue를 사용하는 가장 기본적인 이유다.
3. Vue는 컴포넌트 단위로 화면을 만든다
Vue의 또 다른 중요한 특징은 컴포넌트(Component) 기반으로 화면을 구성한다는 것이다.
컴포넌트는 쉽게 말하면 웹 화면을 구성하는 하나의 독립적인 부품이다.
예를 들어 쇼핑몰 화면을 생각해보자.
쇼핑몰
│
├─ Header
│
├─ ProductList
│ │
│ ├─ ProductCard
│ ├─ ProductCard
│ └─ ProductCard
│
├─ Cart
│
└─ Footer
페이지 전체를 하나의 거대한 HTML 파일로 만드는 것이 아니라 기능과 역할에 따라 작은 단위로 나눈다.
예를 들어 상품 하나를 보여주는 컴포넌트를 만들 수 있다.
<template>
<div class="product">
<h2>{{ name }}</h2>
<p>{{ price }}원</p>
</div>
</template>
이렇게 만든 ProductCard를 여러 번 재사용할 수 있다.
ProductCard
↓
노트북
ProductCard
↓
키보드
ProductCard
↓
마우스
컴포넌트 방식의 장점은 화면이 커져도 각각의 기능을 분리해서 관리할 수 있다는 것이다.
하나의 거대한 화면
↓
여러 개의 작은 컴포넌트
↓
각 컴포넌트를 조합
↓
하나의 웹 페이지
4. .vue 파일은 어떻게 구성될까
Vue 프로젝트를 만들면 .vue 확장자를 가진 파일을 자주 보게 된다.
예를 들어 다음과 같다.
App.vue
Header.vue
ProductCard.vue
LoginForm.vue
일반적인 Vue 파일은 크게 세 부분으로 구성된다.
<template>
</template>
<script setup>
</script>
<style>
</style>
각각의 역할은 다음과 같다.
<template>
→ 화면 구조
→ HTML
<script>
→ 데이터와 동작
→ JavaScript
<style>
→ 디자인
→ CSS
예를 들어 간단한 카운터를 만들면 다음과 같다.
<template>
<div>
<h1>{{ count }}</h1>
<button @click="count++">
증가
</button>
</div>
</template>
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<style>
button {
padding: 10px;
}
</style>
하나의 파일 안에 하나의 UI 기능과 관련된 HTML, JavaScript, CSS를 함께 관리할 수 있다.
이를 Single File Component, SFC라고 한다.
5. Vue Template에서 데이터를 사용하는 방법
Vue의 <template>에서는 JavaScript 데이터를 HTML과 연결하기 위한 여러 문법을 제공한다.
가장 기본적인 것이 {{ }} 문법이다.
const message = "Hello Vue";
<p>{{ message }}</p>
화면에는 다음과 같이 출력된다.
Hello Vue
하지만 {{ }}는 주로 태그 사이에 값을 출력할 때 사용한다.
HTML 속성에 데이터를 넣고 싶다면 v-bind를 사용한다.
예를 들어 이미지 주소가 데이터로 저장되어 있다고 해보자.
const imageUrl = "/images/cat.jpg";
다음과 같이 작성할 수 있다.
<img v-bind:src="imageUrl">
v-bind는 보통 :로 줄여서 사용한다.
<img :src="imageUrl">
즉 다음 두 코드는 같다.
<img v-bind:src="imageUrl">
<img :src="imageUrl">
구조로 보면 다음과 같다.
Vue 데이터
imageUrl
↓
v-bind
↓
HTML 속성
src
그래서 실제 Vue 코드에서는 다음과 같은 형태를 자주 볼 수 있다.
<img :src="imageUrl">
<a :href="url">링크</a>
<button :disabled="isDisabled">
전송
</button>
6. Vue Directive란
Vue에서는 v-로 시작하는 특별한 속성을 자주 사용한다.
이를 Directive라고 한다.
대표적인 Directive는 다음과 같다.
v-bind
→ HTML 속성에 데이터 연결
v-if
→ 조건에 따라 요소 표시
v-for
→ 반복 렌더링
v-model
→ 입력값과 데이터 연결
v-html
→ HTML 문자열 렌더링
v-on
→ 이벤트 처리
예를 들어 로그인 여부에 따라 문구를 다르게 표시하고 싶다면 v-if를 사용할 수 있다.
<p v-if="isLogin">
로그인 되었습니다.
</p>
목록을 반복해서 출력할 때는 v-for를 사용할 수 있다.
<ul>
<li v-for="user in users">
{{ user.name }}
</li>
</ul>
버튼 클릭 이벤트는 v-on을 사용한다.
<button v-on:click="count++">
증가
</button>
하지만 v-on:click 역시 축약할 수 있다.
<button @click="count++">
증가
</button>
따라서 Vue 코드에서
:
가 보이면 v-bind,
@
가 보이면 v-on
이라고 이해하면 된다.
7. v-html은 무엇일까
일반적으로 Vue에서 데이터를 출력할 때는 {{ }}를 사용한다.
예를 들어
const message = "<strong>Hello</strong>";
을 다음과 같이 출력하면
<p>{{ message }}</p>
HTML 태그가 실행되는 것이 아니라 문자열 그대로 출력된다.
<strong>Hello</strong>
HTML 문자열을 실제 HTML로 렌더링하려면 v-html을 사용할 수 있다.
<p v-html="message"></p>
이 경우 <strong> 태그가 실제 HTML로 해석되어 굵은 글씨로 출력된다.
{{ message }}
→ Text로 출력
v-html="message"
→ HTML로 해석
하지만 v-html에는 주의할 점이 있다.
사용자가 입력한 값을 그대로 v-html에 넣으면 XSS 공격의 원인이 될 수 있기 때문이다.
<div v-html="userInput"></div>
사용자 입력에 악성 HTML이 포함되어 있다면 브라우저가 해당 코드를 HTML로 해석할 수 있다.
따라서 기본적으로는 {{ }}를 사용하고, 신뢰할 수 있는 HTML을 렌더링해야 하는 경우에만 v-html을 사용하는 것이 좋다.
8. Real DOM과 Virtual DOM
Vue를 공부하면 Virtual DOM이라는 용어도 자주 등장한다.
먼저 DOM은 브라우저가 HTML을 객체 구조로 변환한 것이다.
예를 들어 다음 HTML이 있다.
<div>
<h1>Hello</h1>
<p>Vue</p>
</div>
브라우저는 대략 다음과 같은 트리 형태로 관리한다.
Document
│
└─ div
├─ h1
│ └─ Hello
│
└─ p
└─ Vue
이것이 실제 브라우저의 Real DOM이다.
일반 JavaScript에서는 Real DOM을 직접 수정할 수 있다.
document.querySelector("h1").textContent = "Hello Vue";
Vue에서는 개발자가 이런 DOM 조작을 직접 관리하지 않아도 된다.
Vue는 화면 구조를 JavaScript 메모리상의 가상 구조인 Virtual DOM으로 표현하고, 데이터가 변경되었을 때 이전 구조와 새로운 구조의 차이를 확인한다.
예를 들어
기존 Virtual DOM
<p>0</p>
에서 값이 변경되면
새 Virtual DOM
<p>1</p>
이 된다.
Vue는 둘을 비교한다.
<p>0</p>
↓
비교
↓
<p>1</p>
그리고 실제로 변경된 부분을 Real DOM에 반영한다.
데이터 변경
↓
Vue가 변경 감지
↓
Virtual DOM 변경
↓
이전 Virtual DOM과 비교
↓
변경된 부분 확인
↓
Real DOM 업데이트
Virtual DOM이 항상 직접적인 DOM 조작보다 빠르다는 의미는 아니다.
단순히 요소 하나만 수정한다면 직접 DOM을 변경하는 것이 더 단순할 수도 있다.
중요한 점은 복잡한 화면에서 어떤 DOM을 언제 변경해야 하는지를 개발자가 직접 관리하지 않아도 된다는 것이다.
9. Vue는 서버와 어떻게 연결될까
Vue는 주로 사용자가 보는 화면을 담당하는 프론트엔드에서 사용한다.
실제 웹 서비스에서는 Vue만 단독으로 사용하는 것이 아니라 백엔드 서버와 API를 통해 데이터를 주고받는 경우가 많다.
예를 들어 Spring Boot와 Vue를 함께 사용한다면 다음과 같은 구조가 될 수 있다.
사용자
│
↓
Vue.js
프론트엔드
│
│ HTTP API 요청
↓
Spring Boot
백엔드
│
↓
Database
사용자가 게시글 목록 페이지를 열면 Vue가 서버에 데이터를 요청할 수 있다.
const response = await fetch("/api/posts");
const posts = await response.json();
서버에서 받은 데이터를 화면에 출력한다.
<div v-for="post in posts">
{{ post.title }}
</div>
전체 흐름은 다음과 같다.
사용자
↓
Vue 화면 접속
↓
API 요청
↓
Spring Boot
↓
Database 조회
↓
JSON 응답
↓
Vue가 데이터 저장
↓
화면 자동 갱신
따라서 JavaScript의 Promise, async/await, fetch 같은 비동기 처리도 Vue를 공부할 때 함께 알아두는 것이 좋다.
10. Vue 프로젝트의 기본 구조
Vue 프로젝트를 생성하면 일반적으로 다음과 비슷한 구조를 볼 수 있다.
src
│
├─ assets
│
├─ components
│
├─ App.vue
└─ main.js
간단하게 역할을 보면 다음과 같다.
main.js
→ Vue 애플리케이션 시작
App.vue
→ 최상위 컴포넌트
components
→ 여러 Vue 컴포넌트
assets
→ 이미지, CSS 등의 정적 파일
main.js에서는 Vue 애플리케이션을 생성하고 App.vue를 브라우저 화면에 연결한다.
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
이를 단순하게 보면
main.js
↓
Vue App 생성
↓
App.vue
↓
각종 Component
↓
브라우저 화면
과 같은 구조다.
Vue의 전체적인 동작 흐름
지금까지의 내용을 하나로 연결하면 Vue의 기본 구조는 다음과 같이 이해할 수 있다.
사용자
│
↓
Vue Component
│
┌────────┴────────┐
│ │
↓ ↓
Template Script
화면 구조 데이터
│
↓
상태 변경
│
↓
Vue가 변경 감지
│
↓
Virtual DOM
│
↓
Real DOM 반영
│
↓
화면 변경
그리고 서버가 필요한 경우 그 사이에 API 통신이 추가된다.
Vue
│
│ fetch / axios
↓
Backend API
│
↓
Database
결국 Vue에서 중요한 것은 HTML 문법을 새로 배우는 것이 아니라 데이터를 중심으로 화면을 관리한다는 사고방식이다.
마무리
가장 기본적인 관점에서 보면 Vue의 역할은 생각보다 단순하다.
데이터를 만든다.
↓
데이터를 화면과 연결한다.
↓
데이터가 변경된다.
↓
Vue가 이를 감지한다.
↓
화면을 자동으로 변경한다.
그리고 큰 화면은 여러 개의 컴포넌트로 나누어 관리한다.
Vue.js
├─ 데이터와 화면을 연결
├─ 데이터 변경 감지
├─ 화면 자동 업데이트
├─ 컴포넌트 단위 UI 구성
└─ API를 통해 백엔드와 통신
따라서 Vue를 공부할 때 각각의 Directive를 무작정 외우기보다
JavaScript 기본 문법
↓
DOM / Event
↓
비동기 처리
↓
Vue 기본 구조
↓
Template / Directive
↓
Reactivity
↓
Component
↓
API 통신
↓
Router / 상태 관리
순서로 전체 구조를 이해하면서 공부하는 것이 좋다.