1. [Vue] Vue LifeCycle

vue로 프로젝트에 개발 참여 경험이 있지만, LifeCycle에 대해 깊게 공부하기보다 겉핥기 식으로 간단한 내용만 익히고 넘어갔었다. 근데 vue를 제대로 이해하려면 LifeCycle을 아는 것이 기본이라는 회사 선배의 말을 듣고 공부해보려 한다.

chatGPT가 말하는 Vue LifeCycle

최근 들어 공부를 좀 더 효율적으로 하기 위해 사용하고 있는 chatGPT에게 vue Life 사이클에 대해서 설명달라고 했다.

정리하면 이렇다.

1. vue.js에는 LifeCycle 훅이 있는데 이 훅은 인스턴스가 크게 create, update, destroy 이 세 단계를 거치면서 자동으로 실행된다.

2. 구체적으로 살펴보면

   • 생성 구간:
     • BeforeCreate: Vue 인스턴스가 초기화되기 전에 호출됩니다.
     • created: Vue 인스턴스가 초기화된 후에 호출됩니다.
       data observation, computed properties, methods, watch/event callbacks이 이 단계에서 설정됩니다.
     • BeforeMount: Vue 인스턴스가 DOM에 마운트되기 전에 호출됩니다.
     • mounted: Vue 인스턴스가 DOM에 마운트된 후에 호출됩니다.
   • 업데이트 구간:
     • beforeCreate : Vue 인스턴스가 다시 렌더링되고 변경 내용을 DOM에 적용하기 전에 호출됩니다.
     • updated: Vue 인스턴스가 다시 렌더링되고 변경 사항을 반영하도록 DOM이 업데이트된 후에 호출됩니다.
   • 파괴 단계
     • beforeDestroy : Vue 인스턴스가 파괴되기 전에 호출됩니다.
     • destroded : Vue 인스턴스가 파괴된 후에 호출됩니다.

3. 이 라이프 사이클 훅을 사용하여 Vue 인스턴스 라이프사이클의 특정 단계에서 코드를 실행할 수 있다.

내가 사용해 본 구간

프로젝트에서 가장 많이 사용했던 함수는

created, mounted다. beforeDestroy와 destroded도 사용해 봤는데 딱 한 번 정도 사용해봤었다.

초기화 단계에서 동작하는 라이프 사이클인 만큼 변수 초기화나 조회 메서드를 실행하기 위해서 많이 사용했었다.

궁금한 점

개발 당시에는 created, mounted 차이를 제대로 모르고 사용했다.
create에서 사용이 안 되면 mounted에서 사용하곤 했었는데 공부하기로 마음 먹었으니 제대로 알고 가고자 한다.

<created와 mounted의 차이점>

created : 인스턴스가 생성된 직후에 코드를 실행. (HTML 생성 전)
mounted : 실제로 화면에 내용이 그려진(rendering) 직후에 코드 실행.

또 created의 경우 컴포넌트가 상속 관계를 갖을 경우 부모 > 자식 순으로 호출되지만,
mounted는 자식 > 부모 순으로 호출한다.

깨달은 점

watch와 computed는 methods 처럼 하나의 속성이다.

watch는 데이터의 변화를 감지하여 동작하는 속성.
computed는 계산된 데이터를 반환해주는 속성.

watch를 데이터를 감지해야 할 일이 좀 있어서 자주 사용했었는데,
데이터가 많은 경우 watch를 사용하면 vue의 성능이 떨어질 수 있다고 했던 것이 기억난다.

log

요즘 꾸준히 뭔갈 해내는 게 없어서 마음 먹은 김에 Vue 라이프 사이클을 공부했다.
내일은 아마 안드로이드를 공부하지 않을까 싶다. 왜 안드로이드냐. 지금 하고 있는 프로젝트가 안드로이기 때문. 손을 놓았던 적 꽤 돼서 그런가 안드로이드 너란 녀석 어렵다....