- 리액트와 앵귤러의 장점 결합 ▶ 앵귤러의 양방향 데이터 바인딩 + 리액트의 단방향 데이터 흐름의 장점 결합
양방형 데이터 바인딩 데이터의 변화를 템플릿에 결합하여 화면을 업데이트 한 후, 화면 입력에 따라 데이터를 업데이트 하는 개념
단반향 데이터 흐름 모델 컴포넌트에서 UI컴포넌트로 데이터가 흘러 이해와 관리가 쉬움
Vue.js 특징
- 간편한 문법, 쉬운 사용법
- 기존 HTML 템플릿을 그대로 활용 ▶ 컴포넌트에서 다루는 CSS 기존 문법 그대로 사용
- 확장성 ▶ 다양한 라이브러리 및 프레임워크 사용
- Virtual DOM
DOM이란? - Document Object Model의 약자 - HTML문서의 각 요소(li, head 등의 태그)에 접근하고 사용할 수 있도록하는 트리 구조의 객체 모델
Virtual DOM이란? - 기존 DOM의 속도, 잦은 오류 등의 단점을 보완하기 위해 나온 개념 - 실제 DOM 문서를 추상화하여 변화가 자주 일어나는 View를 Virtual DOM과 메모리에서 미리 처리한 후, 실제 DOM과 동기화 하는 프로그래밍 개념 - 실제 DOM보다 가볍고 빠른 랜더링이 가능 ▶ DOM의 부담 감소 - 실제 DOM과 Virtual DOM의 구조상 큰 차이가 없음
장점 - ViewModel이 Model과 View 사이의 어댑터가 되어 변경이 생겼을 때, 변경을 최소화 - Model과 ViewModel이 View로부터 독립적 ▶ 플랫폼 독립적 개발, 쉬운 테스트 - 개발자와 디자이너의 병렬적 작업
View - UI에 관련된 것을 다룸 - 구조, 레이아웃, 형태 등
ViewModel - View가 사용할 메서드와 필드 구현 ▶ View에게 상태 변화를 알림(옵저빙) - View가 쉽게 사용할 수 있도록 모델의 데이터를 가공하여 View에게 제공 - View와 Model의 1:N 관계 형성 Model - 앱에서 사용할 데이터와 관련된 행위, 데이터를 다룸
