[Vue.js] 인스턴스 (Instance), 라이프사이클(LifeCycle)

React는 파일(혹은 모듈) 자체를 클래스형, 함수형의 컴포넌트로 제작하는 방식이었다.

이와는 달리, Vue는 컴포넌트를 포함한 다양한 정보가 담긴 인스턴스(new Vue)에 정보를 담는 것으로 보인다.

 

이에 해당하는 Vue 인스턴스에 대해 학습 및 포스팅할 예정이다.

 

* 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다.

---

💚 Vue 인스턴스

인스턴스는 뷰로 개발할 떄 필수로 생성해야 하는 코드라고 소개된다. Vue.js로 화면을 구성하기 위해 꼭 생성해야 하는 필수 단위인 것이다.

  new Vue()

  // 변수할당
  var vm = new Vue({
    // options...
  });

 

Vue 앱은 Root Vue 인스턴스를 기점으로, 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 확장된다.

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

 

- 인스턴스 옵션(속성, API)

Vue 객체를 생성할 때, 아래와 같이 el, data, template, methods 등 인스턴스 옵션 객체를 포함할 수 있다. (전체옵션 링크)

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

• el : Vue 인스턴스와 연결할 HTML 엘리먼트를 선택. 이렇게 연결하게 되면, 이후 해당 엘리먼트 내에서 Vue 조작이 유효해짐
• template : 화면에 표시할 요소(HTML, CSS 등)
• data : Vue 인스턴스에 전달되는 정보 혹은 특정 값. 반응성(Reactivity)가 반영된 속성 (React의 state 개념과 유사한 것 같다)
• props : 부모 컴포넌트의 데이터를 받을 수 있게 노출된 속성의 리스트(해시)
• methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
• watch : data에 정의한 속성이 변화했을 때, 추가 동작을 수행하게끔 정의하는 속성
• computed : Vue 인스턴스에 추가되는 계산된 속성. 모든 getter, setter는 자동으로 this 컨텍스트를 바인딩
• created(LifeCycle Methods) : Vue 라이프 사이클과 관련된 속성

 

* data 옵션은 인스턴스 생성시 존재한 값들만 반응형에 해당된다. 그렇기에, 인스턴스를 할당할 때 data 초기화가 반드시 병행된다.

// 데이터 객체
var data = { a: 1 }

// Vue인스턴스에 데이터 객체를 추가합니다.
var vm = new Vue({
  data: data
})

// 인스턴스에 있는 속성은
// 원본 데이터에 있는 값을 반환합니다.
vm.a === data.a // => true

// 인스턴스에 있는 속성값을 변경하면
// 원본 데이터에도 영향을 미칩니다.
vm.a = 2
data.a // => 2

// ... 반대로 마찬가지입니다.
data.a = 3
vm.a // => 3


// !새로운 속성을 추가/변경하여도 반응형에 해당하지 않음!
vm.b = 'hi'

---

💚 Vue 라이프사이클

Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. (데이터 관찰(watch), 템플릿 컴파일, 인스턴스 DOM 마운트 및 업데이트)

위의 경우 안에서 각 시점에서 특정 로직을 실행할 수 있는 LifeCycle Hooks 역시 호출이 된다.

 

출처 : https://kr.vuejs.org/v2/guide/instance.html

• beforeCreate, created : 인스턴스의 초기화 전, 후에 동기적으로 실행
• beforeMount, mounted : 컴포넌트가 el에 마운트되기 전, 후에 동기적으로 실행 (render 호출시점)
• beforeUpdate, updated : data 옵션이 변경되어 Virtual DOM 리렌더링과 패치가 이뤄지기 전, 후에 동기적으로 실행
• activated, deactivated : keep-alive 컴포넌트의 활성화, 비활성화 시 동기적으로 실행
• beforeDestroy, destroyed : 인스턴스가 제거된 전, 후에 동기적으로 실행
• errorCaptured : 자손 컴포넌트로부터 에러가 캡쳐되었을 때 호출됨

* options 속성이나 콜백함수에 Arrow Function 사용을 지양한다.

  이유는, Arrow Function은 this 속성을 가지지 않기 때문에, this가 다른 변수로 인지되거나 렉시컬하게 취급될 수 있기 때문이다.

---

벌써, Vue의 2번째 포스팅이다. 인스턴스의 분량 자체가 많진 않지만, 다른 부분과 엮기도 애매하고 중요한 개념이라 별도로 정리한다.

다음에는, Vue의 Component에 대해 알아보는 포스팅들을 영상학습과 병행하여 작성하겠다. (템플릿, 바인딩 등 개념은 이후 작성할 듯)

 

[출처]

- Vue 공식문서 : https://kr.vuejs.org/v2/guide/instance.html

- 캡틴판교 님의 블로그 : https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/