Vue.js 입문 : 기본 철학과 기본 문법 정리

1. Vue.js는 어떤 프레임워크인가?

 Vue.js는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 프레임워크입니다.

HTML, CSS, JavaScript 위에서 동작하기 때문에,

기존 웹 개발 흐름을 크게 벗어나지 않으면서도 더 효율적으로 화면을 만들 수 있게 도와줍니다.

 

"The Progressive JavaScript Framework"
점진적으로 도입할 수 있는 자바스크립트 프레임워크

 

위는 Vue의 공식 슬로건입니다.

즉, 기존 프로젝트의 일부 화면에만 도입하는 것도 가능하고,

SPA(Single Page Application) 전체를 Vue로 구성하는 것도 가능한 유연한 프레임워크라는 뜻입니다.

 

---

 

2. Vue의 기본 철학 : 쓰기 편한 이유?

Vue의 핵심 아이디어는 크게 네 가지로 정리할 수 있습니다.

 

1️⃣ HTML 기반의 템플릿 + 선언적 바인딩

Vue는 HTML 기반 템플릿 문법을 사용합니다.

템플릿 안에서 {{ }}나 v--로 시작하는 디렉티브를 사용해 화면과 데이터(state)를 선언적으로 연결합니다.

• 이 엘리먼트의 텍스트는 message라는 데이터와 연결된다.
• 이 버튼은 클릭되면 handleClick 함수를 실행한다

이런 식으로, DOM을 직접 조작하는 대신 '이 데이터가 바뀌면 화면이 알아서 이렇게 바뀐다'라고 선언만 해주면 됩니다.

 

---

 

2️⃣ 컴포넌트 기반 구조

Vue 앱은 보통 여러 개의 컴포넌트로 쪼개서 작성합니다.

각각의 컴포넌트는 다음을 포함합니다.

• template: 화면 구조(HTML)
• script: 로직 및 상태 관리(자바스크립트)
• style: 스타일(CSS)

이렇게 잘게 쪼갠 컴포넌트를 조합해서 큰 화면을 만들기 때문에

재사용성, 유지보수성, 협업 측면에서 큰 장점이 있습니다.

 

---

 

3️⃣ MVVM 패넡과 ViewModel 레이어

초기 Vue 문서에서는 Vue를 MVVM 패턴의 ViewModel 레이어에 집중한 라이브러리로 설명합니다.

• Model: 순수 데이터 / 비즈니스 로직
• View: 실제 브라우저에 그려지는 HTML
• ViewModel(Vue): Model과 View를 연결하는 중간 계층

따라서 데이터가 바뀌면 View가 자동으로 갱신되고, 사용자의 입력도 자연스럽게 데이터로 연결됩니다.

이 구조 덕분에, DOM 조작과 이벤트 처리를 일일이 신경쓰기보다

데이터 상태에 집중해서 개발할 수 있는 것이 Vue의 큰 장점입니다.

 

---

 

4️⃣ 반응성 시스템

Vue의 또 다른 핵심은 반응형(Reactive) 데이터 시스템입니다.

• Vue 컴포넌트의 상태는 반응형 객체로 관리됨
• 이 상태를 변경하려면 Vue가 어떤 부분을 다시 렌더링해야 하는지 자동으로 계산함

개발자는 단지 this.count++처럼 데이터를 바꿀 뿐이고,

DOM 업데이트는 Vue가 알아서 처리합니다.

 

---

 

3. 간단한 Vue 예제 살펴보기

Vue 3 기준으로, 공식 문서에 나오는 가장 기본적인 예제는 아래와 비슷한 형태입니다.

<div id="app">
	<p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
</div>

<script type="module">
	import { createApp } from 'vue'
    
    createApp({
    	data() {
        	return {
            	count: 0
            }
        },
        methods: {
        	increment() {
            	this.count++
            }
        }
    }).mount('#app')
</script>

이 코드에서 볼 수 있는 Vue의 핵심 포인트는

• createApp({...}).mount('#app'): #app 요소에 Vue 앱을 마운트
• data()에서 count라는 반응형 상태를 정의
• methods 안에 increment라는 메서드 정의
• 템플릿에서
  • {{ count }}로 데이터 표시
  • @click="increment"로 클릭 이벤트 연결

DOM을 직접 조작하지 않고, 데이터(count)만 조작하면 화면이 알아서 갱신됩니다.

---

 

4. 템플릿 문법 맛보기

Vue의 템플릿 문법은 HTML 안에서 JS 데이터를 자연스럽게 쓰는 법 정도로 이해하면 편합니다.

 

---

 

1️⃣ Mustache 문법: {{ }}

가장 기본적인 데이터 바인딩은 {{ }} 문법입니다.

<p>안녕하세요, {{ username }} 님</p>

username 데이터가 바뀌면 이 텍스트도 자동으로 갱신됩니다.

 

---

 

2️⃣ 속성 바인딩 - v-bind와 : 축약형

HTML 속성에 자바스크립트 값을 바인딩할 대는 v-bind를 사용합니다.

<img v-bind:src="imageUrl">
<!-- 축약형 -->
<img :src="imageUrl">

imageUrl에 값에 따라 이미지 경로가 동적으로 바뀝니다.

 

---

 

3️⃣ 이벤트 바인딩 - v-on과 @ 축약형

클릭, 입력 등 DOM 이벤트는 v-on으로 바인딩합니다.

<button v-on:click="handleClick">클릭</button>
<!-- 축약형 -->
<button @click="handleClick">클릭</button>

handleClick은 methods 안에 정의된 함수입니다.

 

---

 

5. 조건 분기와 반복 렌더링: v-if, v-show, v-for

1️⃣ v-if 와 v-else / v-show

조건에 따라 특정 요소를 보여주거나 숨길 수 있습니다.

<p v-if="isLoggedIn">로그인 상태입니다</p>
<p v-else>로그인이 필요합니다</p>

<p v-show="isLoggedIn">로그인 상태입니다</p>

v-if는 조건에 따라 컴포넌트가 실제로 제거되고 생성됩니다. 즉, DOM 자체를 넣었다 뺐다 합니다.

반면, v-show는 렌더링을 하되 display:none 처리를 합니다.

 

---

 

2️⃣ 리스트 렌더링: v-for

배열 데이터를 반복 렌더링할 때는 v-for를 사용합니다.

<ul>
	<li v-for="item in items" :key="item.id">
    	{{ item.name }}
    </li>
</ul>

여기서 items는 배열 데이터이고,

:key는 Vue가 각 요소를 구분해서 효율적으로 업데이트 하기 위한 값입니다.

 

---

 

6. 양방향 바인딩: v-model

v-model은 입력값과 데이터 상태를 양방향 바인딩하는 디렉티브입니다.

<input v-model="message" placeholder="아무 말이나 입력해보세요" />
<p>현재 입력: {{ message }}</p>

input에 타이핑하면 message 데이터가 바뀌고 {{ message }} 텍스트도 자동으로 바뀝니다.

폼 처리, 검색 필터, 로그인 폼 등에서 매우 자주 사용되는 문법입니다.

 

---

 

정리

지금까지 본 예제의 공통점은 하나입니다.

 

"데이터를 바꾸면 화면이 자연스럽게 따라온다"

 

Vue는 내부적으로 Proxy 기반의 반응형 시스템을 사용해

데이터가 읽힐 때와 쓸 때를 감시하고 필요한 부분만 다시 렌더링합니다.

따라서 개발자는 DOM 조작 코드(document.querySelector, innerText 등)를 직접 쓰지 않고

상태와 로직에 집중해서 화면을 구성할 수 있습니다.

 

---

 

Vue.js 요약

• Vue.js는 HTML/CSS/JS 위에 올라가는 UI 프레임워크
• 템플릿 기반 + 선언적 바인딩으로 DOM 조작을 추상화
• 컴포넌트 기반 구조로 재사용성과 유지보수성 향상
• 반응형(Reactivity) 시스템으로 데이터 변경 시 화면 자동 갱신
• 기초 템플릿 문법
  • 데이터 바인딩: {{ }}
  • 속성 바인딩: v-bind / :
  • 이벤트 바인딩: v-on / @
  • 조건 분기: v-if, v-else, v-show
  • 반복: v-for
  • 양방향 바인딩: v-model

 

---

 

출처

• Vue 공식 한글 문서 「소개(introduction)」
• Vue 공식 문서 「템플릿 문법(template syntas)」
• Vue 공식 문서 「반응성 심층 분석(Reactivity in Depth)」
• Vue 「공식 문서 반응성 기본 (Reactivity Fundamental)」

 

---

 

Vue2의 핵심개념 4가지가 궁금하다면?

2025.11.19 - [Web/Vue] - Vue2 Options API : data, methods, computed, watch

Vue2 Options API : data, methods, computed, watch

 

Vue에서의 데이터 흐름이 궁금하다면?

2025.11.19 - [Web/Vue] - Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기

Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기