뷰 인스턴스

• 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.
• new Vue()로 뷰 인스턴스를 생성한다.
• 이때 Vue를 생성자라고 하며, 뷰 라이브러리를 로딩하고 나면 접근할 수 있다.
• 뷰의 필요한 기능들을 미리 정의해 놓고 그 기능들을 재정의하여 편리하게 사용하기 위해 생성자를 사용한다.
• 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다.
• 인스턴스의 유효 범위는 el 속성으로 지정한 HTML의 범위 안에서만 옵션 속성들이 적용된다.
  • 뷰 라이브러리 파일 로딩 → 인스턴스 객체 생성(옵션 속성 포함) → 특정 화면 요소에 인스턴스를 붙임 → 인스턴스 내용이 화면 요소로 변환 → 변환된 화면 요소를 사용자가 최종 확인

뷰 인스턴스 라이프 사이클

• 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다.
• 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 한다.
• 라이프 사이클은 크게 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 나뉜다.
• 부착 → 갱신 구간은 데이터가 변경되는 경우에만 거치게 된다.

인스턴스 생성 ~ 인스턴스를 화면에 부착

1. beforeCreate : (이벤트 및 라이프 사이클 초기화 이후 ~ 화면에 반응성 주입 전) 인스턴스가 생성되고 처음 실행되는 라이프 사이클 단계. data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.
2. created : (화면에 반응성 주입 이후 ~ el, template 속성 확인 전) beforeCreate 다음에 실행되는 단계. data 속성과 methods 속성이 정의되었기 때문에 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있다. 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.
3. beforeMount : (el, template 속성 확인 및 template 속성 내용을 render()로 변환 이후 ~ $el 생성 후 el 속성 값을 대입 전) render() 함수가 호출되기 직전의 로직을 추가하기 좋다.
4. mounted : ($el 생성 후 el 속성 값을 대입 이후 ~ 인스턴스를 화면에 부착) el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계. template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계. 돔에 인스턴스가 부착되지마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다. ($next Tick API를 활용하여 HTML 코드로 회종 파싱될 때까지 기다린 후 돔 제어 로직을 추가한다.)

인스턴스를 화면에 부착 ~ 인스턴스 내용 갱신 (데이터가 변경되는 경우에만 진입)

1. beforeUpdate : (인스턴스의 데이터 변경 이후 ~ 화면 재 렌더링 및 데이터 갱신 전) el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환되는 데, 이때 치환된 값은 뷰의 반응성을 위해 $watch 속성으로 감시한다. (데이터 관찰) 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계. 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다.
2. updated : (화면 재 렌더링 및 데이터 갱신 이후 ~ 인스턴스 내용 갱신) 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 실행되는 단계. 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 한다. 가급적이면 변경 데이터의 화면 요소(돔)와 관련된 로직을 추가하는 것이 좋다. (데이터 값을 갱신하는 로직은 beforeUpdate에 추가)

인스턴스 내용 갱신 ~ 인스턴스 소멸

1. beforeDestroy :뷰 인스턴스가 파괴되지 직전에 호출되는 단계. 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.
2. destroyed : 뷰 인스턴스가 파괴되고 나서 호출되는 단계