Vue.js 기본 개념 / 사용하는 이유 / 가상 돔

Vue.js 란?

자바스크립트(이하 js) 기반으로 만들어진 웹 개발을 위한 프레임워크 중 하나이다.

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리로 데이터가 변경되면 DOM에 다시 대입해줘야 화면이 변경되었던 일반적인 웹 개발 방식과 다르게, 데이터 변화를 감지하여 화면에 변경사항을 바로 표시할 수 있다.

• MVVM 패턴을 사용한다.
• Virtual DOM을 사용한다.(React의 가상 돔 채택)
• 양방향 데이터 바인딩을 제공한다.(Angular의 데이터 바인딩 채택)
• Template와 Component를 사용하여 재사용이 가능한 인터페이스를 만든다.

---

왜 Vue.js 를 사용할까?

1. 데이터 바인딩이 간편하다.

아래 HTML 코드에서 엘리먼트를 변경하려면 어떻게 해야할까?

<div>
	<h2 id="message">hello</h2>
</div>

 

이와 같이 엘리먼트의 id로 DOM에 접근하여 텍스트를 직접 변경할 수 있을 것이다.

<script>
	var elMessage = document.getElementById('message');
	elMessage.innerText = 'bye';
</script>

 

이러한 사용자 인터렉션이 간단하거나 별로 없다면 직접 구현해도 되겠지만, 규모가 커지면 많은 DOM 요소를 관리하고 유연한 코드를 작성하는 것이 힘들어진다. 제대로된 컨벤션과 규칙이 있다고 해도 어느 데이터가 어느 DOM에 적용되었는지 관리하기 번거롭다.

 

프론트 프레임워크인 React에서는 state를, Vue에서는 data를 변경하기만 하면 DOM은 알아서 업데이트 되기 때문에 이 데이터가 어디에 쓰였는지 기억하지 않아도 된다. 

 

2. 컴포넌트 단위로 개발하기 편리하다.

화면에 보여지는 뷰의 단위를 작게 쪼개어 재활용이 가능한 형태로 관리하는 것이 컴포넌트이다.

컴포넌트를 활용하면 화면을 구조화하여 일괄적인 패턴으로 개발, 코드를 쉽게 이해하고 재사용할 수 있다.

 

3. 사용하기 쉽고 빠르다.

Angular는 Typescript를 써야 하고 React는 기존 js 문법을 잘 알아야 한다.

반면 vue는 js를 잘 알지 못해도 사용할 수 있고 HTML 렌더링하는 시간이 빠르다.

---

MVVM 패턴

화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식이다.

화면 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 직관적으로 이해할 수 있고 유지보수에 용이하다.

웹 페이지는 View 역할을 하는 DOM과 Model 역할을 하는 자바스크립트로 만들어진다.

ViewModel 레이어가 없는 경우 직접 모델과 뷰를 연결한다. (ex.document.getElementById('id').appendChild(newNode);)​

Vue.js는 돔 리스너와 데이터 바인딩을 제공하여 돔과 자바스크립트 객체 간의 동기화를 자동으로 처리한다.

1. Vue.js에서 뷰 단의 DOM 이벤트 감지
2. 이벤트가 감지되면 서버로부터 데이터 요청
3. 결과로 받은 Model 데이터를 바인딩하여 화면 변경

 

뒷단의 DB 데이터 처리 및 비지니스 로직과 앞단의 화면 동작 관련 로직을 분리하고, 뒷단에서 넘어온 데이터를 모델에 담아 뷰로 넘겨주는 중간 지점이 ViewModel이다.

---

가상 돔 (Virtual DOM)

먼저 DOM에 대해 알아보자. DOM이란 Document Object Model로서 웹 페이지를 객체로 표현하는 모델을 의미한다.

 

전체적인 웹 페이지 렌더링 과정은 이렇다.

1. 브라우저가 HTML 태그를 파싱하여 돔 트리를 구성하고 스타일 시트에서 CSS를 파싱하여 스타일 규칙을 만든다.
2. 돔 트리와 스타일 규칙이 합쳐져 렌더 트리를 만든다.
3. 생성된 렌더 트리는 정해진 순서대로 화면에 표시되고 그리기 과정이 진행된다.
4. 렌더링 엔진은 좀 더 빠르게 제공하기 위해 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작하여 점점 화면이 뜨는 것을 확인할 수 있다.

렌더링 엔진 종류
- 크롬, 사파리: 웹킷(Webkit) 엔진 사용
- 파이어폭스: 게코(Gecko) 엔진 사용

 

브라우저는 DOM을 이용하여 화면을 렌더링 한다.

 

화면에 변경사항이 생기면 돔을 직접 조작하여 브라우저에 반영해야 하고 이는 돔 트리가 수정될 때마다 렌더 트리가 실시간으로 갱신된다는 단점이 있었다. 그래서 가상 돔(Virtual DOM)을 사용하게 되었다.

 

가상 돔은 실제 돔에 접근하여 조작하는 대신 이것을 추상화시킨 자바스크립트 객체를 이용한다. 실제 돔과는 달리 메모리에 올라가 있어 성능이 좋다. 변경 사항이 반영된 가상 돔을 이전 가상 돔과 비교하여 변경된 부분만 실제 돔에 반영한다. 

---

양방향 데이터 바인딩

데이터 바인딩은 View와 Model을 묶어 유기적으로 동작하게 하는 것이다.

 

- 단방향

단방향 데이터 바인딩은 컴포넌트 간 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로 전달하게끔 구조화되어있는 것을 의미한다.

 

- 양방향

반면, 양방향 데이터 바인딩은 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한 쪽이 변경되면 다른 한 쪽도 자동으로 변경되는 것을 의미한다.

---

참고자료 및 출처 🙇‍♂️

https://wikidocs.net/17701

https://kim6394.tistory.com/217

https://mkil.tistory.com/435