Front-End(Web)/Vue

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

ttaeng_99 2021. 5. 26. 02:09
반응형

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/  

 

반응형