[Vue] 생명 주기 훅(Lifecycle Hooks)

1. Lifecycle Hooks

Vue 컴포넌트의 생명주기 동안 특정 시점에 자동으로 호출되는 함수 -> 개발자는 컴포넌트의 특정 시점에 원하는 로직을 실행할 수 있음

2. 주요 lifecycle hooks

1) created: 컴포넌트가 생성된 직후 호출

2) mounted: 컴포넌트가 DOM에 마운트된 후 호출

3) updated: 컴포넌트의 데이터가 변경되어 DOM이 업데이트된 후 호출

4) unmounted: 컴포넌트가 제거될 때 호출

3. Mounting 예시

Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후 특정 로직을 수행

4. Updating 예시

반응형 데이터의 변경으로 인해 컴포넌트의 DOM이 업데이트된 후 특정 로직을 수행하기

5. Lifecycle Hooks 주의사항

동기적으로 작성할 것!

1) 컴포넌트 상태의 일관성 유지를 위해서

2) Vue 내부 메커니즘과의 동기화를 위해서