Vue3 특징

virtual DOM 사용

너무 많이 업데이트하는 비효율적인 연산을 줄이고자 만든 가상의 DOM

DOM 구조를 체크하는 변경하는 방식이 복잡하며 단순화/자동화 하기 위해 만들어짐

 

 

Virtual DOM 동작 원리

- UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링

- 현재 Virtual DOM과 이전 Virtual DOM을 비교해 변경된 부분만 실제 DOM에 반영

- 가상 돔 렌더링은 변경된 부분만 DOM에 적용, 상태 변화 자동감지, 빠른 화면 렌더링 가능

 

Vue3의 Virtual DOM 새로운 렌더링 전략

- 템플릿 구문에서 정적 요소와 동적 요소를 구분하여 트리 순환 시 동적 요소만 순환

구문 내의 정적 영역을 미리 블록으로 구분하여 렌더링 시 정적 블록에는 접근x, 동적요소 코드에만 접근하여 렌더링 트리 탐색 최적화

- 렌더링 시 객체가 여러 번 생성되는 것 방지하기 위해 컴파일러가 미리 템플릿 구문 내 정적 요소, 서브트리, 데이터 객체 등을 탐지해 렌더러 함수 밖으로 호이스팅 

렌더링 시 Render마다 객체를 다시 생성하는 것 방지

- 컴파일러가 미리 템플릿 구문 내에서 동적 바인딩 요소에 대해 플래그 생성 컴파일러가 미리 생성해둔 플래그로 필요한 부분만 처리하여 렌더링 속도 향상

 

> 트리쉐이킹 강화

- 모듈을 번들링하는 과정에서 사용하지 않는 코드 제거 -> 파일크기 줄어듦, 로딩성능 향상
- Bundle 크기 절반 이상으로 줄임

 

> 타입스크립트 지원

- 타입스크립트의 타입 추론 방식은 타입을 명시적으로 선언하지 않아도 추론 가능해야함(객체 구조 특성상 일일이 타입 정의)

 

> SFC(sing file component)

- 단일 파일 컴포넌트

- 하나의 파일이 하나의 컴포넌트

- HTML CSS Javascript를 <template> <script> <style>  블럭으로 캡슐화

 

> Template 문법

- 브라우저 화면에 렌더링하는 과정에서 템플릿이라는 문법 사용

- vue 템플릿은 HTML CSS 등의 마크업 속성과 데이터 및 로직들을 연결 -> HTML 형태로 변환

 

> Vue-CLI

- Vue 개발 환경 설정도구, 자동으로 Vue 프로젝트 생성해줌

- Babel과 Webpack  라이브러리까지 관리해주는 프로젝트 구축 용이

- 기본적인 프로젝트 세팅(폴더구조, Lint와 build를 위한 라이브러리 구성, Webpack)

 

> Vue.js의 Component

- 단일 파일 컴포넌트를 추천

- css는 상위 css의 영향 받지 않음(빌드 시점에 고유한 셀렉터 이름으로 대체하는 방식 사용하기 때문)

- 레이아웃의 각 섹션이 트리 형태로 구성되듯이 이에 상응하는 컴포넌트를 트리형태로 구성하여 개발하는 구조

 

> MVVM 모델

- HTML DOM이 view역할, JS가 Model 역할

- 뷰모델이 없는 아키텍처에서는 getElementByid와 같은 DOM API를 직접 이용해서 모델과 뷰 연결해야했음

  ex) jQuery

 

 

Vue React

공통점:

가상돔 사용

컴포넌트 제공

뷰에만 집중, 라우터, 상태관리를 위해서 서드파티 라이브러리 사용

성능의 차이:

react에서는 불필요한 업데이트 방지할 때 shouldCoponentUpdate 라는 메소드를 통해서 최적화

Vue에서는 컴포넌트의 종속성이 렌더링 중 자동으로 추적