라이프 사이클

Vue.js 라이프 사이클: 컴포넌트의 탄생부터 소멸까지

 

Vue.js는 현대적인 프론트엔드 개발을 위한 강력한 도구입니다. 컴포넌트 기반의 아키텍처를 채택하여 복잡한 UI를 효율적으로 관리할 수 있도록 돕습니다. Vue.js 컴포넌트는 생성, 업데이트, 그리고 소멸의 과정을 거치며, 이러한 과정을 **라이프 사이클(Lifecycle)**이라고 합니다.

라이프 사이클은 컴포넌트의 각 단계에서 특정 함수(훅)를 호출하여 원하는 로직을 실행할 수 있도록 해줍니다. 이를 통해 데이터 초기화, DOM 조작, 이벤트 처리 등 다양한 작업을 수행할 수 있습니다.

본 글에서는 Vue.js 라이프 사이클의 각 단계와 이에 해당하는 훅에 대해 자세히 설명하고, 실제 개발에서 어떻게 활용할 수 있는지 예시와 함께 살펴보겠습니다.

728x90

라이프 사이클 단계

Vue.js 라이프 사이클은 크게 다음과 같은 단계로 나눌 수 있습니다.

1. 생성 단계 (Creation)

• beforeCreate: 컴포넌트가 생성되기 직전에 호출됩니다. 데이터나 메서드가 아직 초기화되지 않은 상태입니다.
• created: 컴포넌트가 생성된 직후 호출됩니다. 데이터 초기화, 서버 통신 등을 수행하기 좋은 시점입니다.

2. 마운트 단계 (Mounting)

• beforeMount: 컴포넌트가 DOM에 마운트되기 직전에 호출됩니다.
• mounted: 컴포넌트가 DOM에 마운트된 직후 호출됩니다. DOM에 접근하여 조작할 수 있습니다.

3. 업데이트 단계 (Updating)

• beforeUpdate: 데이터가 변경되어 컴포넌트가 업데이트되기 직전에 호출됩니다.
• updated: 데이터가 변경되고 컴포넌트가 업데이트된 직후 호출됩니다.

4. 소멸 단계 (Destruction)

• beforeDestroy: 컴포넌트가 파괴되기 직전에 호출됩니다. 타임아웃, 이벤트 리스너 해제 등 정리 작업을 수행하기 좋은 시점입니다.
• destroyed: 컴포넌트가 파괴된 직후 호출됩니다. 컴포넌트 인스턴스에 더 이상 접근할 수 없습니다.

각 단계별 훅의 활용 예시

• beforeCreate:
  • 컴포넌트 초기 설정
  • 이벤트 버스 등록
• created:
  • 데이터 초기화 (API 호출, 로컬 스토리지에서 데이터 가져오기 등)
  • 컴퓨터 계산
  • 다른 인스턴스에 데이터 전달
• beforeMount:
  • DOM 생성 전 최종 데이터 준비
• mounted:
  • DOM 조작 (요소 추가, 클래스 추가/삭제 등)
  • 서드파티 라이브러리 초기화
  • 이벤트 리스너 등록
• beforeUpdate:
  • 데이터 변경 전 최종 확인
• updated:
  • DOM 업데이트 후 추가 작업 (예: 스크롤 위치 복원)
• beforeDestroy:
  • 타임아웃, 인터벌 해제
  • 이벤트 리스너 해제
  • 자식 컴포넌트 제거
• destroyed:
  • 청소 작업 (예: 메모리 해제)

실제 개발에서의 활용

• 데이터 페칭: created 훅에서 API를 호출하여 데이터를 가져와 상태를 업데이트합니다.
• DOM 조작: mounted 훅에서 DOM에 접근하여 초기 화면을 구성하거나, updated 훅에서 데이터 변경에 따라 DOM을 동적으로 업데이트합니다.
• 라이프 사이클 이벤트: $emit 메서드를 사용하여 부모 컴포넌트에 이벤트를 전달하고, 자식 컴포넌트의 상태 변화를 알릴 수 있습니다.
• 컴포넌트 간 통신: 이벤트 버스를 사용하여 비관련 컴포넌트 간에 데이터를 전달할 수 있습니다.
• 컴포넌트 생명주기 관리: beforeDestroy 훅에서 타임아웃, 인터벌 등을 해제하여 메모리 누수를 방지합니다.

결론

Vue.js 라이프 사이클은 컴포넌트의 상태 변화에 따라 자동으로 호출되는 훅을 제공하여, 개발자가 컴포넌트의 각 단계에서 원하는 로직을 실행할 수 있도록 돕습니다. 라이프 사이클을 효과적으로 활용하면 더욱 유연하고 효율적인 Vue.js 애플리케이션을 개발할 수 있습니다.