[실전 코드로 배우는 Vue.js] Chapter 2. Vue의 기본 작동 방식 정리

2.1 가상 Dom 들여다보기

DOM

• 웹상의 HTML(또는 XML) 문서 콘텐츠를 메모리 내부에 트리형 데이터 구조로 나타냄
• HTML 문서의 <div> 또는 <section> 등의 태그는 프로그램이 접근 가능한 노드 및 객체로 표현됨
• 레이아웃이 변경될 때마다 브라우저는 백그라운드에서 DOM API를 이용하여 지속적으로 DOM을 고쳐 그림
• 해석 -> DOM 화면 래스터화 또는 픽셀투스크린 -> 파이프라인을 그리는 페인팅

2.1.1 레이아웃 업데이트 난제

각각의 페인트는 브라우저 성능에 크게 영향을 미치며, DOM을 구성하는 노드가 늘어날 수록 업데이트 비용이 극단적으로 증가함

이를 해결하기 위해 가상 DOM이 설계됨

2.1.2 가상 DOM이란?

브라우저가 지닌 DOM의 인메모리 가상 복사본 버전으로, 객체를 통해 실제 DOM 구조를 모방

속성 제어, 이벤트 처리, DOM 엘리먼트 수동 업데이트 등의 비효율적인 작업에서 DOM을 해방시키는 추상패턴

2.1.3 Vue에서 가상 DOM이 작동하는 방식

절차

• UI 상호작용을 통해 사용자는 엘리먼트의 변화 상태를 Vue에 알림
• Vue는 가상 DOM을 조작해 해당 엘리먼트의 표현 객체(node)를 원하는 모양으로 업데이트
• 업데이트와 동시에 변경 사항 추적
• 변경된 노드에 따라 DOM을 정확하게 업데이트
• 가상 DOM이 내부적으로 업데이트를 완료하면 실제 DOM과 일괄적으로 동기화되어 변경 사항이 브라우저에 반영

* 가상 DOM은 자바스크립트 객체 트리의 일종으로, 업데이트 과정이 오래 걸리지 않으며, DOM API를 호출하지 않기 때문에 DOM 리페인팅을 유발하지 않음

 

2.2 Vue 앱 인스턴스 및 옵션 API

애플리케이션 루트에 단일 Vue 컴포넌트 인스턴스를 두고, 하나의 애플리케이션에서 생성된 모든 Vue 컴포넌트는 이러한 루트 컴포넌트 안에 존재해야 한다.

Vue 클래스는 컴포넌트 설정을 전달받으며, 이는 하나의 객체로 이러한 인수 구조를 옵션 API라 부른다.

createApp()은 컴포넌트 설정 객체를 입력받으며, 이 설정을 기반으로 루트 앱을 생성한다.

생선된 루트 앱을 app.mount() 메서드를 사용해 원하는 HTML 엘리먼트에 루트 컴포넌트 app을 마운팅한다.

#app은 애플리케이션 루트 엘리먼트의 고유 ID 선택자로, Vue 엔진은 이 ID를 이용해 엘리먼트를 조회하고 인스턴스를 탑재한 뒤 브라우저에서 렌더링한다.

 

2.3 옵션 API 탐색

옵션 API는 Vue 컴포넌트 초기화에 필요한 Vue의 핵심 API이며, 필수 프로퍼티는 다음 네 가지 주요 범주로 나뉜다.

1. 상태처리
   • data() : 컴포넌트의 로컬 데이터 상태를 반환
   • watch : 특정 로컬 데이터를 관찰
   • props : 유입 데이터를 담음
   • 기타 : computed, methods 등
2. 렌더링
   • HTMl 뷰 템플릿인 template, 컴포넌트의 렌더링 로직인 render() 등이 있다.
3. 라이프사이클 훅
   • beforeCreate(), created(), mounted() 등
4. 기타
   • privide(), inject(), components 등

 

2.4 템플릿 구문

옵션 API의 template은 유효한 HTML 코드를 단일 문자열에 담고 있으며, 컴포넌트 엘리먼트긔 UI 레이아웃을 나타냄

Vue 엔진은 이 문자열의 구문을 분석해서 자바스크립트 코드로 컴파일한 다음 DOM 엘리먼트를 렌더링한다.

 

2.5 데이터 프로퍼티를 통한 로컬 상태 생성

옵션 API의 data() 함수 프로퍼티를 통해 컴포넌트의 로컬 상태를 저장, 반환된 객체는 데이터 객체라 부름

템플릿에 데이터 프로퍼티를 삽입할 때는 이중 중괄호 {{}} 로 표현하는 mustache 구문을 사용

모든 대이터 객체 프로퍼티는 this라는 컴포넌트 인스턴스를 통해 직접 또는 내부적으로 접근 가능

this는 모든 컴포넌트의 로컬 메서드, computed 프로퍼티, 라이프사이클 훅에 접근 가능

Vue 데브툴을 사용해 데이터 프로퍼티의 반응성 디버깅 가능

 

2.6 Vue의 반응성이 작동하는 방식

1. Vue.js 3.0에서 ES5 프록시 기반 메커니즘 이용해 데이터의 반응성 활성화시킴
2. 와처 객체를 통해 setter로 발동된 모든 데이터 업데이트 추적, 감지 후 대기열 시스템을 거쳐 가상 DOM과 실제 DOM을 업데이트
3. 단기간 발생하는 DOM의 비효율적인 다중 업데이트를 피하기 위해 큐 시스팀 활용. Vue 엔진이 큐에서 해당 와처를 소비하고 플러시 하기 전까지, 하나의 컴포넌트 와처는 데이터 변경 횟수에 관계없이 큐 내부에 한 개만 존재.
4. Vue 엔진은 모든 와처를 소비하고 플러시한 뒤 각 와처의 run() 함수를 실행

 

2.7 v-model을 이용한 양방향 바인딩

컴포넌트의 로직과 뷰 템플릿 사이에서 데이터를 동기화시키는 기법

 

2.8 v-model.lazy 수정자

모든 키 입력을 양방향으로 동기화하면 애플리케이션이 불필요한 재렌더링을 반복할 위험이 있으므로, 이러한 오버헤드를 줄이려면 v-model.lazy 수정자로 데이터 모델을 바인딩해야 한다.

이 수정자를 적용하면 입력 엘리먼트의 변경 사항이 onChange 이벤트를 발동시켰을 경우에만 v-model이 이를 추적

v-model.number, v-model.trim 수정자도 있음

 

2.9 v-bind를 통한 반응형 데이터 바인딩 및 Props 데이터 전달

v-bind는 : 문자로 축약하며, Vue 컴포넌트를 props로 다른 엘리먼트에 전달할 때는 단방향 데이터 바인딩인 v-bind 사용

 

2.10 클래스 및 스타일 속성 바인딩

class, style 속성에 객체를 전달하면 클래스명을 동적으로 지정할 수 있다.

 

2.11 v-for를 이용한 데이터 컬렉션 순회

동적 리스트 렌더링. 이들이 다루는 데이터는 동적이지만 콘텐츠 유형과 UI 레이아웃은 비슷하게 고정된다.

2.11.1 객체 속성 순회

자바스크립트의 객체는 키-값 매핑 테이블의 일종이며, 객체의 각 프로퍼티는 이러한 테이블의 고유 키다.

각 순회 원소는 key 속성값을 정의해야 하며, 이 속성은 원소를 고유하게 바인딩하고 업데이트하는 데 매우 중요한 역할을 한다.

2.11.2 key 속성과 원소 바인딩 고유성

각 노드 엘리먼트의 고유 ID인 key는 순회 리스트 항목마다 각각 바인딩되어 인플레이스 패치(DOM을 직접 조작) 방식 대신 key를 단서로 삼아 렌더링 노드와 하위 엘리먼트를 추적, 재사용, 재정렬한다.

key는 아이템의 고유 식별자(id) 또는 리스트의 표현 색인(appearance index) 이어야 한다.

 

2.12 v-on을 이용한 이벤트 리스터 추가

DOM 이벤트를 리스너에 바인딩하려면 v-on 또는 축약형 @문자를 엘리먼트 태그에 적용한다.

2.12.1 v-on 이벤트 수정자를 이용한 이벤트 처리

전달된 이벤트는 다음과 같이 세 가지 주요 이벤트 페이즈 중 하나 또는 모두를 거치며 이동한다.

1. 캡처 또는 캡처 페이즈
   • 이벤트는 최상위 엘리먼트에서 대상 엘리먼트로 이동 또는 전파된다.
2. 대상
   • 이벤트는 대상 엘리먼트에 존재한다.
3. 버블링
   • 이벤트가 대상 엘리먼트에서 상위 엘리먼트까지 이동 또는 버블링한다.

v-on 디렉티브의 이벤트 수정자 : .stop, .prevent, .self, .once, .capture, .passive

2.12.2 키 코드 수정자를 이용한 키보드 이벤트 감지

키 수정자는 특정 키가 일으키는 keyup, keydown, keypress 등의 키보드 이벤트를 감지하는 용도로 사용한다.

Ctrl + Enter, Shift S 와 같은 특수 키 조합 또한 포착 가능하다.

ex) @keydown.enter, @keyup.ctrl.13

 

2.13 v-if, v-else,  v-else-if를 이용한 조건부 렌더링

조건부 렌더링을 활용하면 DOM에서 엘리먼트를 생성하거나 제거할 수 있다.

DOM에서 엘리먼트를 지나치게 자주 마운트/해제하면 비효율적인 결과를 초래하는 상황도 있다. 이때는 v-show를 사용

 

2.14 v-show를 이용한 조건부 표시

v-if와 다르게 css의 display 규칙을 이용해 엘리먼트의 가시성만 전환한다. 

 

2.15 v-html을 이용한 동적 HTML 코드 표시

v-html을 이용해 일반 HTML 코드를 문자열 형태로 DOM에 동적으로 주입한다.

v-html은 오직 신뢰할 수 있는 콘텐츠 렌더링 또는 서버 측 렌더링 에만 사용해야 한다. 클라이언트측 렌더링 코드에는 이 디렉티브를 사용하지 않는 것이 좋다.

 

2.16 v-text를 이용한 텍스트 콘텐츠 표시

v-text는 이중 중괄호 {{}} 처럼 엘리먼트 콘텐츠로 데이터를 주입하는 디렉티브이나 변경 사항이 있어도 렌더링된 텍스트를 업데이트하지 않는다.

플레이스홀더 텍스트를 미리 정의한 다음 컴포넌트 로드가 완료된 후 한 번만 교체하려 할 때 유용하다.

 

2.17 v-once 및 v-memo를 이용한 렌더링 최적화

v-once는 한 번만 렌더링하며, 어떠한 렌더링이 다시 발생해도 업데이트하지 않는다.

v-memo는 자바스크립트 조건 표현식이 담긴 배열을 받아 렌더링을 제어하려는 부분의 최상위 엘리먼트에 탑재하며, 해당 조건의 판단 결과가 이전과 달라졌을 때만 대상 엘리먼트 불록을 다시 렌더링한다.

 

2.18 전역 컴포넌트 등록

app 인스턴스의 component()를 호출하여 전역 컴포넌트 등록