Vue.js 라이프 사이클

uoayop·2021년 10월 6일

vue 라이프사이클

Vue

목록 보기

2/4

인스턴스 생명 주기

할 일이 산더미라 미루고 미루던 Vue의 라이프 사이클을 정리해보았다.
🔗 공식문서를 읽으면서 정리를 해보았는데, 틀린 내용이 있을 수도 있다.
미래의 내가 깨달음을 얻은 뒤 수정할 예정,, 😀
- (공식 문서에 적힌 내용)
- 🍀 (내 언어로 쉽게 번역)

Instance lifecycle hooks

라이프 사이클 🌀

그거 뭔데 어떻게 하는 건데

각 컴포넌트는 생성될 때 초기화 단계를 거친다.
- DOM을 업데이트 할 때 초기화 단계를 거친다.
  - 데이터를 관찰하거나 변경될 때
  - 템플릿을 컴파일할 때
  - 인스턴스를 DOM에 마운트할 때
이 과정에서 라이프 사이클 훅이 실행되고, 사용자는 특정 단계에서 코드를 추가할 수 있다!
즉, 인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 이라고 한다.
그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅 이라고 한다.

라이프 사이클 훅 🚧

잠깐 ✋🏻

Vue의 모든 라이프 사이클 훅은 this 컨텍스트가 인스턴스에 바인딩 되어있어서, data, computed 및 methods 속성에 접근할 수 있다.

🍀 이게 뭔소리냐면 화살표 함수를 사용해서 라이프 사이클 메소드를 정의하면 안된다는 의미다.
❌ created: () => this.getFunction()
⭕ created: this.getFunction()

화살표 함수는 부모 컨텍스트를 바인딩하기 때문에
this는 컴포넌트 인스턴스가 아니고, this.getFunction는 정의되지 않음 (undefined)

🍀 화살표 함수는 this가 없음!!!
따라서 this는 다른 변수로 취급되거나 호출한 변수를 발견할 때까지 부모 스코프에서 해당 변수를 찾게 됨

라이프 사이클 전체적인 흐름

beforeCreate

타입 : Function
인스턴스가 초기화 된 직후, 데이터 관찰 및 이벤트/감시자 (watcher) 설정 전에 동기적으로 호출됨

🍀 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계
🔥 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않고 화면 요소(dom) 에도 접근할 수 없음

created

타입 : Function
인스턴스가 생성된 후 동기적으로 호출됨
이 단계에서 data 관찰, computed 속성, methods, watch/이벤트 콜백 등의 설정이 준비되었음을 의미하는 옵션 처리를 완료함

🍀 data, methods 속성이 정의되어서 접근 가능!
🔥 마운트 단계가 시작되지 않아서, $el 속성을 사용할 수 없음
▶ 화면 요소가 인스턴스에 부착되기 전이므로 template 속성에 정의한 돔 요소에 접근하는 코드를 구현할 수 없음

beforeMount

타입 : Function
🔥 이 훅은 서버 측 렌더링 중 호출되지 않음
마운트가 시작되기 직전에 호출됨

🍀 render() 함수가 호출되기 직전의 단계로, 인스턴스를 화면에 붙이기 전 실행해야 할 코드를 구현하면 됨
render 함수가 처음으로 호출됨

🍀 created 이후에 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후
el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전에 호출됨!

mounted

인스턴스가 마운트된 후 호출되며, 여기서 Vue.createApp({}).mount()로 전달된 엘리먼트는 새로 생성된 vm.$el 로 대체됨

🍀 el 속성에서 지정한 화면 요소에 인스턴스가 부착된 후 호출됨
🍀 template 속성에 정의한 화면 요소에 접근할 수 있음
🔥 mounted는 모든 자식 컴포넌트가 마운트되었음을 보장하지 않음!

🍀 돔에 인스턴스가 부착되자마자 호출되기 때문에, 하위 컴포넌트나 외부 라이브러리에 의해
후에 추가된 화면 요소들은 최종 HTML 코드로 변환되는 시점과 다를 수 있음
- 전체 화면이 렌더링될 때까지 기다리려면 mounted 내에서 vm.$nextTick을 사용해야함

mounted() {
  this.$nextTick(function () {
    // 전체 화면 내용이 렌더링 된 후에 아래의 코드가 실행됨
  })
}

beforeUpdate

타입 : Function
🔥 초기 렌더링만 서버측에서 수행되기 때문에, 서버 측 렌더링 중 호출되지 않음
DOM이 패치되기 전에 데이터가 변경될 때 호출됨

🍀 화면 요소에 인스턴스가 부착된 후, $watch 속성으로 관찰하던 데이터가 변경되면 가상 돔을 이용해 화면에 다시 그려지게 됨, 이 때 그리기 직전 호출되는 단계
업데이트 전에 기존 DOM에 접근할 수 있음 ( ex) 수동으로 추가한 이벤트 리스터 제거 )
- 변경 예정인 데이터 값을 이용해 작업을 해야할 때 이 단계 사용하면 됨

updated

타입: Function
🔥 서버 측 렌더링 중 호출되지 않음
데이터가 변경되어 가상 DOM이 다시 렌더링 되고 패치된 후에 호출됨
updated 훅 내부에서 DOM의 종속적인 연산을 할 순 있지만, 상태 변경에 반응하기 위해 computed나 watch 를 사용하는 것이 좋음

🍀 이 단계에서 그 값을 또 변경하면 무한 루프에 빠질 수 있음!

beforeUpdate -> updated (또 값 변경) -> beforeUpdate -> updated ...

🍀 데이터 값을 갱신하는 로직은 beforeUpdate에서 처리하자
mounted와 마찬가지로 updated도 모든 하위 컴포넌트가 다시 렌더링 되었음을 보장하지 않음

$nextTick을 사용해 전체 화면이 재렌더링 될 때까지 기다릴 수 있음