[Goorm] Vue.js로 시작하는 SPA개발 Chapter3. Vue Instance와 작동원리

[Goorm] Vue.js로 시작하는 SPA개발

3. Vue Instance와 작동원리

3.1. Vue Instance

● 참고문서

---

- Vue.js 공식문서 - The Vue Instance(https://kr.vuejs.org/v2/guide/instance.html)

- Vue.js 공식문서 - Computed Properties Watchers(https://kr.vuejs.org/v2/guide/computed.html)

---

● Vue Instance?

---

- MVVM패턴의 View Model에 해당, 그렇다고 Vue가 MVVM패턴을 가진다는 것은 아님.

- View(DOM)과 Model(Plain JavaScript Object)사이의 통신을 가능하게 해주는 역할

- Binder를 가지고 있어 View와 Model을 서로 맞춰줌

- Data Binding이 자동적으로 가능한 이유임

---

★ MVVM(Model View View Model) = Model + View + View Model

■ 구조

Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분

View : 사용자에게 보여지는 UI 부분

View Model : View를 표헌하기 위해 만든 View를 위한 Model. 즉, View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리 부분

■ 동작

1. 사용자 Action들은 View를 통해 들어옴

2. View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달

3. View Model은 Model에게 데이터를 요청

4. Model은 View Model에게 요청받은 데이터를 응답

5. View Model은 응답 받은 데이터를 가공하여 저장

6. View는 View Model과 Data Binding하여 화면을 나타냄

■ 특징

1. Command, Data Binding 패턴을 사용하여 구현함으로 View와 View Model사이의 의존성을 없앰

2. View Model과 View는 1:n 관계

■ 출처 : https://beomy.tistory.com/43

★ DOM(the Document Object Model) : HTML, XML 문서의 프로그래밍 인터페이스

★ Binder : View와 View Model사이에서 데이터 / 이벤트 전달

★ Data Binding : View와 Model를 하나로 연결하는 것

---

- Listeners : 이벤트라고 생각하면 됨

- Vue의 구성요소들은 Model의 변화에 반응적(Reactive)

---

3.2. Instance Lifecycle

● Instance Lifecycle & Hooks

---

- Vue Instance들은 일련의 생애주기를 가지게 됨. 컴포넌트들도 마찬가지

- Hooks로 각 상애주기 단계에서 필요한 일을 할도록 지정할 수 있음(단, 단계마다 할 수 있는 일이 제한)

■ Creating : Component초기화 단계, Component가 DOM에 추가되기 전으로 View에 보이지 않음

■ BeforeCreate : Data, Component가 세팅되지 않은 시점

■ Created : Data와 Component가 활성화 되어 접근할 수 있지만, 마운트 및 랜더링 된 상태가 아니라 View에 보여지지 않음

■ Mounting : DOM 삽입 단계, 초기 랜더링 직전에 Component에 접근 가능

■ BeforeMount : 템플릿, 랜더 함수들이 컴파일된 후에 첫 랜더링이 일어나기 직전 실행

■ BeforeUpdate : 데이터가 변할 때 실행

■ Updated : 데이터가 변하여 재 랜더링이 일어난 후에 실행

■ BeforedDestory : 인스턴스 제거 되기 직전에 호출, 컴포넌트는 원래 모습과 모든 기능들을 그대로 가지고 있음

■ Destroyed : 뷰 인스턴스 제거 된 후에 호출, Vue 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트 리스너가 제거되면 모든 하위 Vue인스턴스도 삭제

■ 출처 : https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4

---

3.3. Instance Properties

● Instance Properties

---

- Vue Instance가 만들어질 때 Option Object를 받을 수 있음

- Option Object는 Vue.js 공식문서 참고(https://kr.vuejs.org/v2/api/#%EC%98%B5%EC%85%98-%EB%8D%B0%EC%9D%B4%ED%84%B0)

- 공식문서에서는 Data라고 칭함

- 필수적으로 선택해야 하는 것과 선택적으로 선택해야하는 것이 있음

- Instance의 특성을 지정할 수 있게 해줌.

---

● Instance Properties : Data

---

- 컴포넌트 안에서 사용할 변수를 생성하고 지정

- Data Binding을 가능하게 해주는 속성

- 단, 한 Component에서 정의된 Data는 그 Component에서만 접근 가능

- 컴포넌트가 살아있는 한, 그 변수들은 변경사항들을 모두 반영하고 접근 가능

- (Instance 변수에 접근 가능하면) 일반적인 JavaScript문법으로도 접근 가능

- 코드 상에서 보통 this 키워드를 사용해서 접근

- 만약 삭제되었다가 다시 생성되면, 초기 상태로 돌아감.

---

● Instance Properties : Methods

---

- Vue Instance를 사용하면서 활용 가능한 함수들

- Data, Event, LifeCycle을 활용하는 함수들로 구성

---

● Instance Properties : Lifecycle Hooks

---

- Vue Instance의 Lifecycle Hook을 활용 가능

- 특정 Object의 초기화, 삭제 시 유용

---

3.4. Computed Properties & Watchers

● Computed Properties

---

- Refactoring 측면(외부 동작을 변경하지 않으면서 내부 구조를 개선하는 방법, 디자인을 개선

- 성능적인 측면(Reactivity System = 반응형)

- Method로 사용해도 되지 않을까?

■ computed는 Dependency를 가지고 있는 변수의 변화에 따라 Re-render하는 것

■ Method는 그것과 상관없이 Re-render할 때마다 계속 바뀌는 것

---

● Watchers

---

- Generic Way to react to data changes

- Generic : 클래스 내부에서 사용할 데이터 타입을 외부에서 지정하는 방식

■ 변수의 이전과 이후 상태를 비교해서 필요한 로직 수행

■ Ex) 예문 이름과 성 분리

---

---

● 실습 코드 Github 및 출처

---

- 실습 코드 : https://github.com/ksy90101/Vue.js/tree/master/%5BGoorm%5DVue.js/Chapter03

- 출처 : https://edu.goorm.io/learn/lecture/13020/vue-js%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94-spa-%EA%B0%9C%EB%B0%9C

---