어제, 오늘 그리고 내일

이번 포스팅은 뷰 인스턴스 라이프 사이클에 대하여 알아보도록 하겠습니다.

#1. 뷰 인스턴스 라이프 사이클

인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클(Life Cycle) 속성이라고 합니다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 합니다.

▶라이프 사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기

라이프 사이클 속성에는 created, beforeCreate, beforemount, mounted 등 인스턴스의 생성, 변경, 소멸과 관련되어 총 8개가 있습니다.

이 그림은 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램입니다.

라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어집니다. 위 그림에서 부착-> 갱신 구간은 데이터가 변경되는 경우에만 거치게 됩니다. 그리고 각 단계 사이에 라이프 사이클 속성 created, mounted, updated 등이 실행됩니다. 그럼 각 라이프 사이클 속성을 좀 더 자세히 살펴보겠습니다.

beforeCreate

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

created

beforeCreate 라이프 사이클 단계 다음에 실행되는 단계입니다. data 속성과 methods속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 다만, 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 Dom 요소로 접근할 수 없습니다.

그리고 data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋습니다.

beforeMount

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

▶render()는 자바스크립트로 화면의 Dom을 그리는 함수입니다.

mounted

el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(Dom)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계입니다. 다만, Dom에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있습니다.

▶변환되는 시점이 다를 경우 $next Tick() API를 활용하여 HTML코드로 최종 파싱(변환)될 때까지 기다린 후 Dom제어 로직을 추가합니다.

beforeUpdate

el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시합니다. 이를 데이터 관찰이라고 합니다.

또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 Dom으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예전인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있습니다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다.

updated

데이터가 변경되고 나서 가상 Dom으로 다시 화면을 그리고나면 실행되는 단계입니다. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계입니다. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 합니다. 따라서 데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소(Dom)와 관련된 로직을 추가하는 것이 좋습니다.

▶mounted 단계와 마찬가지로 하위 컴포넌트의 화면 요소와 외부 라이브러리에 의해 주입된 요소의 최종 변환 시점이 다를 수 있습니다. $nextTick() 을 사용하여 변환이 완료될 때까지 기다렸다가 로직을 추가합니다.

beforeDestory

뷰 인스턴스가 파괴되기 직전에 호출되는 단계입니다. 이 단계에서는 아직 인스턴스에 접근할 수 있습니다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계입니다.

destroyed

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

그럼 지금까지 설명한 라이프 사이클 훅이 실제로 어떻게 동작하는지 확인하기 위해 예제를 통해 실습해 보겠습니다.

위 코드는 뷰 시작하기 샘플 코드에서 라이프 사이클의 4개 속성인 beforeCreate, created, mounted, updated를 추가하고 각각 로그를 출력해 보는 예제입니다.

브라우저에서 코드를 실행하고 로그를 보면 뷰 라이프 사이클 도해의 흐름대로 "beforeCreate, created, mounted"가 표시되는 것을 확인할 수 있습니다. 다만, 한 가지 의아한 부분은 updated 속성 함수는 호출되지 않았다는 것입니다. 그 이유는 update 라이프 사이클 혹은 뷰 인스턴스에서 데이터 변경이 일어나 화면이 다시 그려졌을 때 호출되는 로직이기 때문입니다. 그럼 update 앞 단계인 mounted 단계에서 기존에 정의된 data속성의 message 값을 변경해 보겠습니다.

mounted 단계에서 데이터를 변경했기 때문에 beforeUpdate, updated 단계에 정의한 로직이 모두 동작합니다. 다만 여기서는 updated 단계에만 'updated'라는 로그를 출력하는 커스텀 로직을 정의했기 때문에 beforeUpdate 단계에서는 아무런 동작을 하지 않습니다. 

이 코드를 브라우저에서 실행하면 다음과 같은 로그를 확인할 수 있습니다.

"beforeCreate, created, mounted, updated"

아까는 보이지 않던 updated 로그가 출력이 되었습니다. 그 이유는 message의 값이 변경됨에 따라 화면에 표시되는 message 값이 갱신되었고, 이에 따라 update 속성에 정의한 로직이 실행되었기 때문입니다. 여기서 중요한 것은 인스턴스의 데이터가 갱신되면서 라이프 사이클 단계가 beforeUpdate, updated 단계로 진입했다는 점입니다. 이처럼 각 인스턴스 라이프 사이클에 맞춰 원하는 로직을 추가하여 원하는 시점에 실행할 수 있습니다.

Reference

1. 장기효 [예제로 이해하고 실전 프로젝트로 완성한다! Vue.js 입문]