[Vue] - 컴포넌트 생명주기(created, mounted, updated)

컴포넌트 생명주기

 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경이 되면 DOM을 업데이트해야 하는데 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수를 실행하여 개발자가 의도하는 로직이 실행될 수 있도록 도와줍니다.

 

 

1. beforCreate

  Vue 컴포넌트 인스턴스가 생성되어 초기화된 후 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이때, 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않기 때문에 접근할 수 없다는 점을 주의해야 합니다.

 

 

2. created

 Vue 컴포넌트 인스턴스가 모든 상태 관련 옵션 처리를 완료한 후 호출됩니다. data 속성과 methods 속성이 정의되었기 때문에 두 속성값에 접근할 수 있습니다. 하지만 마운팅 단계가 시작되지 않았으므로, el 속성을 아직 사용할 수 없습니다.(template 속성에 정의된 DOM 요소에 접근할 수 없습니다.)

 

 

3. beforeMount

 컴포넌트가 마운트 되기 직전 호출됩니다. 즉, render() 함수가 호출되기 직전에 호출되기 때문에 화면에 붙이기 전 el 속성에 대한 코드를 구현할 때 사용합니다.

 

 

4. mounted

 컴포넌트가 마운트 된 이후 호출됩니다. 즉, el 속성에서 지정한 화면 요소가 인스턴스에 적용되고 난 후 호출됩니다. template 속성에 정의한 화면 요소에 접근할 수 있기 때문에 화면 요소를 제어하는 코드를 구현할 때 사용합니다. 

 

 

5. beforeUpdate

 반응형 상태 변경에 의한 컴포넌트 업데이트 직전 호출됩니다. template 속성들은 watch 속성으로 감시하는데(데이터 관찰) 관찰하고 있는 데이터들이 변경되면 가상 돔을 이용해 화면을 다시 그리게 됩니다. 이때, 그리기 직전 호출되는 단계가 바로 beforeUpdate 입니다. 따라서 변경이 되는 데이터 값을 이용해 작업을 해야 할 때 그 로직을 구현할 때 사용합니다.

 

 

7. updated

 반응형 상태 변경에 의한 컴포넌트 업데이트 후 호출됩니다. 데이터가 변경되어 화면을 다시 그린 이후에 화면 요소를 제어하는 것을 구현하고 싶을 때 이 사용하는 속성입니다. 주의할 점은 updated 속성에서 데이터 값을 변경하게 되면 무한 루프에 빠질 수 있습니다.(beforeUpdate -> updated(값을 변경) -> beforeUpdate -> updated(값을 변경) -> ∞..)

 또한 반응형 상태 변경에 의한 컴포넌트 업데이트 후 호출되기 때문에, 한 코드블럭 내에서 특정 상태 변경 후, 이어서 업데이트된 DOM에 접근해야 하는 경우 nextTick()을 사용해야 합니다.

 

 

8. 그 외

 그 외에도 다양한 생명 주기 훅이 있으니 더 알아보고 싶으신 분은 Vue Docs를 참조하시길 바랍니다.

https://v3-docs.vuejs-korea.org/api/options-lifecycle.html

옵션: 생명주기 | Vue.js