vue.js

[Vue.js] #2 뷰 인스턴스란?

로춘남 2021. 11. 8. 17:47
728x90

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

 new Vue({
            el : '#app',
            data : {
                message: 'Hello Vue.js!'
            }
        });

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 부름. 생성자를 사용하는 이유는 뷰로 개발 할때 필요한 기능을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함.

 

※ 생성자란?

: 객체를 새로 생성 할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성 할때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법. 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를 재활용하기 위해 사용.

 

뷰 인스턴스 옵션 속성

data, el, template 등의 속성을 의미.

ex) Hello Vue.js!

data라는 미리 정의되어 있는 속성을 사용. 이 안에 message라는 새로운 속성을 추가하고 Hello Vue.js! 라는 값을 주었을 뿐. el 미리 정의되어 있는 속성이며, 뷰로 만든 화면이 그려지는 시작점을 의미. 뷰 인스턴스로 화면을 렌더링 할 때 화면이 그려질 위치의 돔 요소를 지정해줘야함.

 

#app은 DOM 요소 중 id를 가진 요소. #는 CSS의 선택자 규칙과 비슷하다.

속 성 설 명
template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음
methods 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가 가능
created 뷰 인스터스가 생성되자마자 실행할 로직을 정의 할 수 있는 속성. 

 

뷰 인스턴스의 유효 범위

: 뷰 인스턴스를 생성하면 HTML 특정 범위 안에서만 옵션 속성들이 적용되어 나타남.

 

new Vue()로 인스턴스 생성 이후 화면에 인스턴스 옵션 속성을 적용하는 과정

1) 뷰 라이브러리 파이 로딩

2) 인스턴스 객체 생성(옵션 속성 포함)

3) 특정 화면 요소에 인스턴스를 붙임

4) 인스턴스 내용이 화면 요소로 변환

5) 변환된 화면 요소를 사용자가 최종 확인

 

뷰 인스턴스 라이프 사이클

라이프 사이클(Life Cycle) : 인스턴스의 상태에 따라 호출 할 수 있는 속성들. 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기

라이프 사이클 훅(Hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직

커스텀 로직 : 개발자가 임의로 작성한 추가 로직

 

라이프 사이클 속성

: created, beforeCreate, beforeMount, mounted 등 인스턴스 생성, 변경, 소멸 관련하여 총 8개가 있음.

 

뷰 라이프 사이클 다이어그램

라이프 사이클은 인스턴스의 생성, 부착, 갱신, 소멸 로 크게 4단계로 나눌 수 있다. 부착에서 갱신 구간은 데이터가 변경되는 경우에만 적용이 된다.

 

beforeCreate

: 인스턴스 생성 이후 가장 처음으로 실행되는 라이프 사이클 단계. data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, DOM과 같은 화면요소에도 접근을 할 수 없음.

 

created

: data속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직을 이용하여 data와 methods에 정의된 값에 접근하여 로직 실행 가능. 다만, 아직 인스턴스가 화면요소에 부착되기 전이기때문에 template 속성에 정의된 DOM 요소로는 접근 불가.

** data와 methods에 접근 할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 받아오는 로직을 수행하기에 좋음.

 

beforeMount

: template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(DOM)에 인스턴스를 부착하기 전에 호출되는 단계. render()가 호출되기 직전 로직 추가하기 좋음

※ render() : JavaScript로 화면의 DOM을 그리는 함수

 

mounted

: el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(DOM)에 접근 할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계.

 

beforeUpdate

: el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환. 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이기 때문에 변경 예정인 새 데이터에 접근 할 수가 있어 변경 예정 데이터값과 관련된 로직을 미리 넣을수도 있음.

 

updated

: 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계.

※ 이 단계에서 데이터값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야함.

 

beforeDestroy

: 뷰 인스턴스가 파괴되기 직전에 호출되는 단계. 아직 인스턴스에 접근 할 수 있기 때문에 데이터를 삭제하기 적합함.

 

destroyed

: 뷰 인스턴스가 파괴되고 나서 호출되는 단계. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 모두 파괴됨.

 

<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!'
            },
            beforeCreate : function(){
                console.log("beforeCreate");
            },
            created : function(){
                console.log("created");
            },
            mounted : function(){
                console.log("mounted");
            },
            updated : function(){
                console.log("updated");
            }
        });
    </script>
</body>

결과값

: beforeCreate

: created

: mounted

 

updated가 출력되지 않는 이유는?

updated 라이프 사이클 혹은 뷰 인스턴스에서 데이터 변경이 일어나고, 화면이 다시 그려질때 호출되는 로직이기 때문!

updated를 나오게 하려면 mounted 단계에서 데이터의 변경을 줘야한다.

<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!'
            },
            beforeCreate : function(){
                console.log("beforeCreate");
            },
            created : function(){
                console.log("created");
            },
            mounted : function(){
                console.log("mounted");
                this.message = 'Helle Vue!'; //기존 데이터에 변화를 줬음
            },
            updated : function(){
                console.log("updated");
            }
        });
    </script>
</body>

※ 각 인스턴스 라이프 사이클을 제대로 알고 있으면 원하는 로직을 추가하여 원하는 시점에 실행 할 수 있음

→ 뷰를 제대로 사용하려면 뷰 인스턴스 라이프 사이클 제대로 이해하기.

728x90
저작자표시 비영리

'vue.js' 카테고리의 다른 글

[Vue.js] #5 뷰 템플릿(template)이란?  (0) 2021.11.11
[Vue.js] #4 뷰 라우터(Router)란?  (0) 2021.11.10
[Vue.js] #3 뷰 컴포넌트란?  (3) 2021.11.09
[Vue.js] #1 Vue.js 란? 뷰제이에스  (0) 2021.11.08

'vue.js'의 다른글

  • 현재글[Vue.js] #2 뷰 인스턴스란?

관련글

티스토리툴바