본문으로 건너뛰기

Composition API의 생명주기

작성일 : 2025.02.12

Composition API의 각 생명주기 훅은 컴포넌트의 특정 시점에서 실행되는 함수입니다. 각 훅의 특징과 사용 사례를 자세히 살펴보겠습니다.

1. setup()​

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // 컴포넌트 초기화 로직
    console.log('setup 실행')
    return {}
  }
})

setup() 함수는 Composition API의 진입점입니다.

  • Composition API의 모든 로직이 이곳에서 시작됩니다
  • props가 해석되고 난 직후 실행됩니다
  • 컴포넌트 인스턴스가 생성되기 전에 실행됩니다
  • this에 접근할 수 없습니다

주요 사용 사례:

  • 반응형 데이터 정의
  • 계산된 속성 설정
  • 메서드 정의
  • 생명주기 훅 등록

2. onBeforeMount()​

import { onBeforeMount } from 'vue'

setup() {
  onBeforeMount(() => {
    console.log('DOM이 마운트되기 전 실행')
  })
}

컴포넌트가 DOM에 마운트되기 직전에 호출됩니다.

  • 템플릿이 컴파일된 후 실행됩니다
  • 가상 DOM이 생성되었지만 실제 DOM에는 아직 반영되지 않은 시점입니다

주요 사용 사례:

  • DOM 조작 전 필요한 데이터 준비
  • 서버 사이드 렌더링 관련 로직 처리
  • 컴포넌트 마운트 전 사전 작업

3. onMounted()​

import { onMounted } from 'vue'

setup() {
  onMounted(() => {
    console.log('컴포넌트가 마운트된 후 실행')
  })
}

컴포넌트가 실제 DOM에 마운트된 후 호출됩니다.

  • 모든 자식 컴포넌트도 마운트가 완료된 상태입니다
  • DOM에 직접 접근이 가능합니다

주요 사용 사례:

  • DOM 요소 접근 및 조작
  • 외부 라이브러리 초기화
  • API 호출
  • 이벤트 리스너 등록

4. onBeforeUpdate()​

import { onBeforeUpdate } from 'vue'

setup() {
  onBeforeUpdate(() => {
    console.log('컴포넌트가 업데이트되기 전 실행')
  })
}

컴포넌트의 데이터가 변경되어 업데이트가 시작되기 전에 호출됩니다.

  • 가상 DOM이 리렌더링되기 전 시점입니다
  • 변경 전의 DOM 상태에 접근할 수 있습니다

주요 사용 사례:

  • DOM 업데이트 전 데이터 스냅샷 생성
  • 업데이트 전 상태 저장
  • 디버깅용 로깅

5. onUpdated()​

import { onUpdated } from 'vue'

setup() {
  onUpdated(() => {
    console.log('컴포넌트가 업데이트된 후 실행')
  })
}

컴포넌트가 업데이트된 후 호출됩니다.

  • 실제 DOM이 업데이트된 후 실행됩니다
  • 모든 자식 컴포넌트도 업데이트가 완료된 상태입니다

주요 사용 사례:

  • 업데이트된 DOM에 접근
  • 변경된 데이터에 따른 부가 작업
  • 외부 라이브러리와의 동기화

6. onBeforeUnmount()​

import { onBeforeUnmount } from 'vue'

setup() {
  onBeforeUnmount(() => {
    console.log('컴포넌트가 제거되기 전 실행')
  })
}

컴포넌트가 제거되기 직전에 호출됩니다.

  • 컴포넌트가 아직 완전히 동작하는 상태입니다
  • 모든 자식 컴포넌트도 아직 활성화된 상태입니다

주요 사용 사례:

  • 이벤트 리스너 제거
  • 타이머 정리
  • 외부 리소스 해제 준비

7. onUnmounted()​

import { onUnmounted } from 'vue'

setup() {
  onUnmounted(() => {
    console.log('컴포넌트가 제거된 후 실행')
  })
}

컴포넌트가 제거된 후 호출됩니다.

  • 모든 자식 컴포넌트도 제거된 상태입니다
  • 모든 반응형 이펙트가 중지된 상태입니다

주요 사용 사례:

  • 메모리 정리
  • 구독 해제
  • 연결된 외부 리소스 완전 해제

8. onErrorCaptured()​

import { onErrorCaptured } from 'vue'

setup() {
  onErrorCaptured((err, instance, info) => {
    console.log('자식 컴포넌트에서 에러 발생:', err)
    return false // 에러 전파 방지
  })
}

자식 컴포넌트에서 에러가 발생했을 때 호출됩니다.

  • 에러, 에러가 발생한 컴포넌트 인스턴스, 에러 정보를 받습니다
  • false를 반환하면 에러 전파를 방지할 수 있습니다

주요 사용 사례:

  • 에러 로깅
  • 사용자에게 에러 알림
  • 대체 UI 표시

생명주기 훅 사용 시 주의사항​

  1. 호출 순서

    • setup() 내에서 훅을 호출하는 순서대로 실행됩니다
    • 동일한 훅을 여러 번 사용할 수 있습니다

  2. 비동기 처리

    • 훅 내에서 비동기 작업을 할 때는 적절한 에러 처리가 필요합니다
    • 컴포넌트가 언마운트된 후에는 비동기 작업 결과를 사용하지 않도록 주의해야 합니다

  3. 메모리 관리

    • onMounted에서 등록한 이벤트 리스너는 onUnmounted에서 제거해야 합니다
    • 타이머나 구독은 반드시 정리해야 합니다

실제 사용 예제​

import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const data = ref(null)
    const timer = ref(null)

    // 데이터 가져오기
    onMounted(async () => {
      try {
        const response = await fetch('https://api.example.com/data')
        data.value = await response.json()
        
        // 주기적 업데이트 타이머 설정
        timer.value = setInterval(() => {
          console.log('데이터 업데이트 체크')
        }, 1000)
      } catch (error) {
        console.error('데이터 로드 실패:', error)
      }
    })

    // 정리 작업
    onUnmounted(() => {
      if (timer.value) {
        clearInterval(timer.value)
      }
    })

    return { data }
  }
}

이 예제는 컴포넌트가 마운트될 때 데이터를 가져오고, 주기적으로 업데이트를 체크하며, 언마운트될 때 타이머를 정리하는 것을 보여줍니다.