뷰 인스턴스 (Vue Instance)

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

---

뷰 인스턴스(Instance)

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이며 필수 조건입니다.

 

형식

new Vue({
	...
});

 

옵션 속성

뷰 인스턴스 생성시 정의가 가능한 요소이자 속성을 의미합니다.

 

종류

• el: 뷰로 만든 화면이 그려지는 시작점을 지정하는 속성
• template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
• methods: 화면 로직 제어와 관련된 메서드를 정의하는 속성
• data: 뷰 인스턴스가 지니고 있는 데이터 속성
• created, beforeCreate, ...: 뷰 인스턴스의 라이프 사이클과 관련된 속성

 

유효 범위

뷰 인스턴스 생성시 HTML의 특징이 특정 범위 안에서만 뷰 인스턴스 옵션 속성이 적용되어 나타나는 것을 의미합니다.

조금 더 자세히 설명하자면, 뷰 인스턴스 생성시 'el' 옵션 속성으로 지정한 화면 요소와 그 이하 레벨의 화면 요소에만 해당 뷰 인스턴스의 다른 요소들이 적용되어 보여지는 것을 의미합니다.

 

화면에 적용되는 과정

1. 뷰 라이브러리 파일 로딩

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

3. 뷰 인스턴스 객체에서 지정한 화면 요소에 해당 뷰 인스턴스를 붙임

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

 

라이프 사이클(Life Cycle)

어플리케이션의 탄생부터 소멸까지의 생명 주기를 의미합니다.

라이프 사이클은 크게 4개의 단계로 이루어져 있습니다.

1. 인스턴스 생성
2. 인스턴스를 화면에 부착
3. 인스턴스 내용 갱신
4. 인스턴스 소멸

 

라이프 사이클 훅(Life Cycle Hook)

각 라이프 사이클 속성에 실행되는 커스텀 로직(개발자가 구현한 로직)

 

라이프 사이클 속성

인스턴스의 상태에 따라 호출할 수 있는 속성을 의미합니다.

 

종류

아래 8개의 속성이 순차적으로 실행되며, Update관련 속성은 갱신이 발생한 경우에만 실행됩니다.

총 8개의 속성은 라이프 사이클 1단계마다 2개씩 연관되어 있습니다.

• beforeCreate
  • 인스턴스 생성되고 가장 처음에 실행되는 단계
  • data와 methods 속성이 아직 인스턴스에 정의되어 있지 않음
  • 화면 요소(Ex; 돔(DOM))에 접근할 수 없음
• created
  • data와 methods 속성이 정의되어 있음 → this로 정의된 값에 접근하여 로직 실행 가능
  • 화면 요소(Ex; 돔(DOM))에 접근할 수 없음
  • 서버에 데이터를 요청하여 받아오는 로직을 수행하기 적절한 단계
• beforeMount
  • template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후, el 속성에 지정된 화면 요소(Ex; 돔(DOM))에 인스턴스를 부착하기 전에 호출되는 단계
    • render() 함수: 자바스크립트로 화면 요소(Ex; 돔(DOM))을 그리는 함수
• mounted
  • el 속성에서 지정한 화면 요소(Ex; 돔(DOM))에 인스턴스가 부착되면 호출되는 단계
    • 주의: 하위 컴포넌트 혹은 외부 라이브러리에 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 상이할 수 있음
  • 화면 요소(Ex; 돔(DOM))에 접근할 수 있음
  • 화면 요소를 제어하는 로직을 수행하기 적절한 단계
• beforeUpdate
  • 관찰하고 있는 데이터가 변경되는 경우, 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
  • 변경 예정인 새 데이터에 접근할 수 있어 관련 로직, 혹은 값을 갱신하는 로직을 처리하기 적절한 단계
    • 주의: 데이터의 값을 변경하는 로직을 넣어도 화면이 다시 그려지지는 않음
• updated
  • 데이터가 변경되고 가상 돔으로 다시 화면을 그리면 실행되는 단계
  • 데이터 변경으로 인한 화면 요소까지 변경 완료된 단계
  • 변경된 데이터의 화면 요소(Ex; 돔(DOM))를 제어하는 로직을 수행하기 적절한 단계
    • 주의: 데이터 값을 변경하면 무한 루프에 빠질 수 있어 computed, watch와 같은 속성에서 진행해야 함
• beforeDestroy
  • 뷰 인스턴스가 파괴/소멸되기 직전에 호출되는 단계
  • 인스턴스에 마지막으로 접근할 수 있기 때문에 데이터 삭제하는 로직을 수행하기 적절한 단계 
• destroyed
  • 뷰 인스턴스가 파괴/소멸되고 나서 호출되는 단계
    • 뷰 인스턴스에 정의된 속성 및 하위 인스턴스가 모두 파괴됨

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue