[Vue] 인스턴스

들어가기 앞서

뷰로 웹 개발을 하기 위해 필수적인 인스턴스와 컴포넌트에 대해 알아보고, 각 요소들의 필요성에 대해 알아보자.

본 글에 앞서, 크롬 익스텐션 Vue.js devtools를 설치 후, 실행하는 것을 권장합니다.
설치법은 이곳을 참조

1. Hello Vue.js

index.html 파일을 하나 생성 한 후, 다음과 같이 작성한다.

<html>
  <head>
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      { { message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      });
    </script>
  </body>
</html>

해당 파일을 크롬 브라우저를 통해 열게되면, 화면에 Hello Vue.js! 라는 문구가 뜨게 된다.
이제 각 속성들에 대하여 알아보도록 하자.

2. 뷰 인스턴스의 정의와 속성

뷰에서 인스턴스(Instance)는 뷰로 화면 개발을 위해 필수적으로 생성해야 하는 기본 단위이다.

뷰 인스턴스 생성
뷰 인스턴스는 다음과 같은 형식으로 생성한다.
```
  // 인스턴스
  new Vue({
     el: '#app', // el 속성
     data: {
       // data 속성
       message: 'Hello Vue.js!'
     }
  });
```
‘Hello Vue.js!’ 텍스트를 화면에 표시하기 위해, new Vue()를 통해 인스턴스를 생성한다.
그 후, 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 위치를 지정하고, data 속성에 message 값을 정의하여 화면의 { {message}}와 연결한다.
뷰 인스턴스 생성자
new Vue()로 인스턴스를 생성할 때, Vue를 생성자라고 한다.

3. 뷰 인스턴스 옵션 속성

뷰 인스턴스 속성은 인스턴스를 생성할 때, 재정의할 data, el, template등의 속성을 포함한다.
그 중, el속성은 뷰로 만든 화면이 그려지는 시작점을 의미하며, 렌더링 시 화면이 그러질 위치의 돔 요소를 지정해 주어야한다.

  <div id="app">
    { { message }}
  </div>

  new Vue({
    el: '#app',
  })

#app값은 화면의 돔 요소 중, app이라는 아이디를 가진 요소를 의미
위 서술한 속성 외에도, template, methods, created 등이 존재

4. 뷰 인스턴스의 유효범위

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션들이 적용되어 나타나며, 이는 el 속성과 밀접한 관련이 있다.

  new Vue({
    el: '#app',
    data: {
      // 아래의 message 값이 message에 치환되어 출력
      message: 'Hello Vue.js!'
    }
  })

<!-- 치환전 -->
  <div id="app">
    { { message }}
  </div>

<!-- 치환 후 -->
  <div id="app">
    <!-- el 태그가 부착된 이 div 태그 아래 값들만 치환되는 유효범위 -->
    Hello Vue.js!
  </div>

el 속성에 인스턴스가 부착되고 나면, 인스턴스에 정의한 옵션 객체의 내용이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면요소에 값이 적용되어 값이 치환 된다.

5. 뷰 인스턴스 라이프 사이클

인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(life cycle) 속성이라고 한다.
그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 한다.

라이프 사이클은 크게 인스턴스 생성, 생성된 인스턴스를 화면에 부착, 인스턴스 내용의 갱신, 인스턴스의 소멸 4가지로 이루어진다.
각 라이프 사이클에는 다시 2단계로 나뉘어 다음과 같은 총 8 단계로 구성된다.

beforeCreate
인스턴스가 생성되고 가장 처음으로 실행되는 단계, 속성 및 DOM에 접근이 불가
created
인스턴스가 화면에 부착되기 전 단계, data와 method에는 접근 가능하나 template 속성에 정의된 돔 요소에 접근 불가
data, methods 등의 속성이 정의되어 서버에 데이터를 요청하여 받아오는 로직을 수행하기 알맞음
beforeMount
DOM에 인스턴스를 부착하기 전 단계, render() 함수가 호출되기 직전의 로직을 추가
mounted
el 속성에서 지정한 요소에 인스턴스가 부착되고 나면 호출되는 단계
template에 접근 가능하여 화면 요소를 제어하는 로직을 수행하기 알맞음
beforeUpdate
관찰하고 있는 데이터가 변경 시, 가상DOM으로 화면을 다시 그리기 전 호출하는 단계
변경 예정 데이터의 값과 관련된 로직을 미리 넣기 알맞음
updated
데이터가 변경되고나서 가상DOM으로 화면을 다시 그리고 나면 실행되는 단계
데이터 변경 후, 화면 요소 제어와 관련된 로직을 추가하기 알맞음

이 단계에서 데이터를 변경하면 무한 루프에 빠질 수 있기 때문에 값 변경을 위해서 computed, watch 속성을 사용해야 함
따라서 데이터 값을 갱신하는 로직은 가급적 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면요소(DOM) 로직을 추가해야 함
beforeDestory
인스턴스가 파괴되기 직전 단계, 인스턴스의 데이터를 삭제하기 알맞음
destroyed 뷰 인스턴스가 파괴되고 호출되는 단계 모든 속성이 제거되고 하위 인스턴스가 모두 파괴

끝마치며

뷰의 인스턴스와 라이프 사이클에 대하여 알아보았다.
다음 포스팅에서는 뷰 컴포넌트에 대하여 알아보도록 하자.

<< Previous Next >>

vue.js에 대한 이해 - 2

글 목록으로

목차