오늘 배운 것

Vue 인스턴스

Vue는 UI를 만들기 위한 프론트엔드 프레임워크이다.

vue.js공식문서를 통해서 배운 것을 정리해보려고 한다.

모든 예제는 vue.js 공식문서에서 가져와 필요에 따라 약간의 수정을 한 것임을 밝힌다.

1. Vue 인스턴스 만들기

• 모든 Vue앱은 Vue 생성자 함수로 Vue 인스턴스를 만드는 것으로 시작한다.

//Vue 인스턴스의 생성
//Vue 인스턴스를 생성할 때는 options 객체를 전달해야한다.
var vm = new Vue({
  // 옵션
})


//Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며,
//자식으로 컴포넌트를 가질 수 있음.
//Todo앱의 경우 다음과 같은 컴포넌트 트리를 가질 수 있을 것임.
Root Instance (루트 Vue 인스턴스)
└─ TodoList (컴포넌트)
   ├─ TodoItem (컴포넌트)
   │  ├─ DeleteTodoButton (컴포넌트)
   │  └─ EditTodoButton (컴포넌트)
   └─ TodoListFooter (컴포넌트)
      ├─ ClearTodosButton (컴포넌트)
      └─ TodoListStatistics (컴포넌트)

// 기본적으로 모든 Vue 컴포넌트는 Vue 인스턴스의 일종으로 볼 수 있다.

2. 데이터와 메소드

• Vue 인스턴스가 생성 될 때 전달된 옵션 객체의 data 객체에 있는 모든 속성이 반응형 시스템에 추가된다. 즉 data 객체 내부의 값이 변경되면 Vue가 "반응"하여 업데이트 된다. (React의 state 변경과 유사)

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

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

// 인스턴스에 있는 속성은
// 원본 데이터에 있는 값을 반환합니다.
// 즉 옵션 객체에 전달된 data 객체의 속성들은 
// 인스턴스의 속성에서 찾을 수 있다.(같은 곳을 바라본다)
vm.a === data.a // => true

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

// 결론적으로 Vue에서 값의 변화에 따라 동적으로 렌더링시키기 위해서는 
// Vue 인스턴스의 data 객체의 속성 값들을 변경시키면 되는 것이다.

// 이 때 주의해야할 점은 인스턴스가 생성될 때 존재한 것들만
// Vue앱에 의해 감시당한다는 것이다.

// 인스턴스의 생성 이후 추가된 속성들은 변경되어도 반응하지 않는다.
vm.b = 'hi'

// 따라서 현재에는 존재하지 않지만 나중에 필요한 속성들은 
// 다음과 같이 빈 값으로라도 초기값을 지정해두는 것이 좋다.

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

// 사용자 정의 속성은 곧바로 인스턴스.속성명으로 바로 접근 가능
// 다른 속성들은 $ 접두어를 사용하여 접근 가능
// 참고로 el 속성은 아이디나 클래스명을 이용해 엘리먼트를 특정하는 속성이다.
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

3. 인스턴스 라이프사이클 훅

// Vue 인스턴스는 초기화, 마운트, 업데이트, 파괴 등 라이프사이클에 따라
// 이벤트가 실행되며, 그 종류와 순서는 아래의 다이어그램을 참고하면 된다.
// 아래의 Vue 인스턴스는 뷰가 생성되고 난 뒤(Created)에 실행되는 함수를 가지고 있다. 
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

4. 라이프사이클 다이어그램