Vue 개요
1. Vue란?
Vue는 사용자 인터페이스(UI)와 싱글 페이지 애플리케이션(SPA) 개발을 위해 설계된 오픈 소스 JavaScript 프레임워크다.
컴포넌트 기반 아키텍처를 제공해, 화면을 작은 독립 컴포넌트 단위로 쪼개서 조합하는 방식으로 개발하게 한다.
1-1. Vue의 성장 과정
1) 초기 개발
- 2014년 Evan You가 처음 릴리스
- 구글에서 AngularJS를 사용한 경험을 바탕으로
“더 가벼우면서 유연한 프레임워크”를 목표로 Vue 설계
2) 성장과 생태계 확장
- 간결한 API, 비교적 낮은 진입 장벽, 좋은 성능 때문에
작은 프로젝트에서 시작해 점점 커뮤니티가 확대 - 오픈 소스 기여가 활발해지면서
라우터, 상태 관리(Vuex/Pinia), 빌드 도구 등 생태계가 빠르게 성장
3) Vue 2 → Vue 3
-
Vue 2.x
- 컴포넌트 기반 아키텍처
- 가상 DOM
- 반응형 데이터 바인딩 시스템
- 이 시기에 본격적으로 “프론트엔드 메이저 프레임워크”로 자리 잡음
-
Vue 3 (2020.09)
- 성능 개선
- TypeScript 지원 강화
- Composition API 도입
- 내부 구조 리팩터링 및 유연성 향상
1-2. 가상 DOM(Virtual DOM) 개념
1) 브라우저 렌더링 기본 과정
일반적인 웹 렌더링 파이프라인은 대략 다음과 같은 단계를 거친다.
- DOM Tree 생성: HTML 파싱
- CSSOM Tree 생성: CSS 파싱
- Render Tree 생성: DOM + CSSOM 결합
- Layout(Reflow): 각 요소의 위치, 크기 계산
- Paint(Rasterize): 실제 픽셀로 그리기
DOM 을 직접 자주 건드리면 이 파이프라인이 자주 반복되면서 비용이 커진다.
2) Vue의 Virtual DOM 동작 방식
- Vue는 렌더링 과정에서 가상 DOM(virtual DOM) 을 생성한다.
- 상태(state)가 바뀔 때마다 새로운 가상 DOM 트리를 만들고,
- 이전 가상 DOM과 Diffing(차이 비교) 을 수행한 뒤,
- 실제 DOM에는 변화가 있는 부분만 최소한으로 반영한다.
이 과정을 재조정(Reconciliation) 이라고 부른다.
3) 가상 DOM의 장점
-
불필요한 전체 재렌더링 방지
- DOM 일부를 바꿀 때 전체 DOM/CSSOM 을 다시 만드는 대신
변경된 부분만 갱신
→ 렌더링 속도 향상
- DOM 일부를 바꿀 때 전체 DOM/CSSOM 을 다시 만드는 대신
-
Layout / Paint 최소화
- 차이 나는 부분을 모아서 한 번에 적용
- Layout, Paint 단계가 여러 번 반복되는 것을 줄임
→ 리소스 사용량 절감
결론적으로, Vue의 가상 DOM 덕분에
동적인 변화가 잦은 UI에서도 비교적 좋은 성능을 기대할 수 있다.
1-3. Vue의 핵심 특징 정리
-
진보적인(Progressive) 프레임워크
-
필요한 만큼만 가져다 쓰는 구조
- 작은 위젯 수준에서 시작 → 점점 SPA 전체로 확장 가능
-
Vue Router, 상태 관리 라이브러리, 빌드 도구 등과 조합하면
대규모 애플리케이션도 구성 가능
-
-
반응형(Reactive) 데이터 바인딩
- 상태가 바뀌면 그에 맞춰 DOM이 자동으로 갱신
- 수동으로 DOM 조작 코드를 많이 작성할 필요가 줄어든다
-
컴포넌트 기반 아키텍처
- 독립적이고 재사용 가능한 컴포넌트로 UI를 구성
- 유지보수성과 재사용성 향상
-
가상 DOM(Virtual DOM)
- 변경 사항만 실제 DOM에 반영하는 방식으로 렌더링 최적화
-
Composition API (Vue 3)
- 반응형 API, 생명주기 훅, 의존성 주입을 함수 기반으로 제공
- 복잡한 컴포넌트 로직을 기능 단위로 잘게 나누고 재사용하기 쉬움
-
배우기 쉬운 문법
- HTML, CSS, JavaScript 기본만 알고 있어도 접근이 쉬운 편
- 템플릿 문법이 직관적이고 명시적이라 진입 장벽이 높지 않다
2. MVVM(Model-View-ViewModel) 패턴이란?
MVVM 패턴은 UI 개발에서 자주 사용하는 아키텍처 패턴이다.
코드 구조를 명확하게 나누고, 유지보수성과 재사용성을 높이는 것이 목표다.
구성 요소는 세 가지다.
-
Model
- 애플리케이션의 데이터와 비즈니스 로직 담당
- View나 ViewModel을 직접 알지 않는 독립적인 레이어
-
View
- 실제 사용자 인터페이스(UI)
(화면, 버튼, 입력 필드, 리스트 등) - 사용자가 직접 보는 영역
- 실제 사용자 인터페이스(UI)
-
ViewModel
-
Model과 View 사이의 중개자
-
Model의 데이터를 View에서 사용하기 좋게 가공하고,
View에서 발생한 액션을 Model에 전달하는 역할 -
보통 양방향 데이터 바인딩을 지원
- View에서 값이 바뀌면 ViewModel → Model 로 반영
- Model 값이 바뀌면 ViewModel → View 로 반영
-
2-1. Vue에서의 MVVM 패턴
Vue는 ViewModel의 역할을 하는 Vue 인스턴스(또는 컴포넌트 인스턴스) 를 중심으로 동작한다.
각 요소를 Vue 관점에서 매핑하면 다음과 같다.
-
Model
- Vue 컴포넌트의
data()에 정의된 상태(state) - 반응성(Reactivity) 시스템이 변경 사항을 추적
- Vue 컴포넌트의
-
View
- Vue의 템플릿(Template)
{{ }},v-bind,v-if,v-for같은 디렉티브와 표현식을 통해
상태를 화면에 렌더링
-
ViewModel
- Vue 인스턴스 / 컴포넌트 객체 자체
- 템플릿에서 사용하는 데이터, 메서드, 계산 속성(computed) 등을 제공
- Model(상태)과 View(템플릿)를 연결하고,
데이터 변화 시 DOM 업데이트를 자동으로 처리
Vue의 반응성 시스템 덕분에
- 데이터 변경 → 자동 DOM 업데이트
- 사용자 입력 → 반응형 상태 업데이트
라는 흐름이 자연스럽게 MVVM 구조를 따른다.
공식 문서: 빠른 시작 | Vue.js
2-2. MVVM 패턴의 장점 (Vue 관점 포함)
-
반응성
- Model이 바뀌면 View가 자동으로 갱신
- View에서 입력한 값도 Model에 바로 반영할 수 있는 구조를 만들 수 있다
-
유지보수성
- Model / View / ViewModel 역할이 분리
- UI 변경, 비즈니스 로직 변경이 서로에게 최소한으로만 영향을 준다
- 테스트 작성, 리팩터링이 쉬워진다
-
재사용성
- 같은 ViewModel(컴포넌트 로직)을 여러 View(템플릿)에서 재사용 가능
- 특히 Composition API 를 사용하면 기능 단위로 로직을 재사용하기 좋다
-
구조적인 코드 작성
- 프로젝트 기본 구조가 정리되므로
- 팀 단위 협업, 코드 리뷰, 온보딩이 수월해진다
마무리
정리하면,
-
Vue는
- 가볍고 유연한 컴포넌트 기반 SPA 프레임워크
- 가상 DOM + 반응형 시스템으로 성능과 개발 생산성을 모두 노리는 설계
- 진보적(Progressive) 구조라 작은 위젯부터 대규모 앱까지 확장 가능
-
MVVM 패턴은
- Model / View / ViewModel 을 분리해
- UI 코드의 구조화, 유지보수, 재사용을 돕는 아키텍처
- Vue 에서는 Vue 인스턴스(컴포넌트)가 사실상 ViewModel 역할을 수행
Vue를 공부할 때 “Vue = MVVM 기반의 반응형 UI 프레임워크”라는 관점으로 같이 기억해 두면, 템플릿, 데이터 바인딩, 컴포넌트 구조를 이해하는 데 훨씬 도움이 된다.
