[Vue3] Life-Cycle(라이프사이클)

composition api를 사용하는 경우에는 setup hook에서 beforeCreate, created에 해당하는 과정이 한꺼번에 처리됩니다.. 이제까지 코드를 작성하면서 써온 setup() 메서드가 바로 setup hook입니다.

 

생명 주기 훅 등록하기

예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`컴포넌트가 마운트 됐습니다.`)
})
</script>

인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUnmounted가 있습니다.

 

onMounted를 호출하면, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결합니다. 이를 위해서는 컴포넌트 설정 중에 이러한 훅은 동기적으로 등록해야 합니다. 예를 들어 다음과 같이 하지 마십시오:

setTimeout(() => {
  onMounted(() => {
    // 작동하지 않습니다.
  })
}, 100)

이 훅이 setup() 또는 <script setup> 내에 배치된 코드 순서에 영향을 받는다는 것을 의미하는 것이 아닙니다. onMounted()는 호출 스택이 동기식이며, setup() 내에서 시작되는 경우에만 외부 함수를 실행하는 방식으로 사용할 수 있습니다.

 

import { onMounted } from 'vue'

export default {
  setup() {
    // onMounted() 훅은 setup 함수 내에서 사용하는 경우에만
    // 마치 외부의 함수를 호출한 것처럼 작성할 수 있습니다.
    //
    // 이렇게 작성된 onMounted() 훅은
    // 컴포넌트가 마운트 된 이후 콜백 함수를 실행하지만
    // `this`를 통해 컴포넌트 인스턴스에 접근할 수 없습니다.
    onMounted(function() {
      // `this`를 통해 컴포넌트 인스턴스에 접근할 수 없습니다.
      console.log('onMounted가 호출 되었습니다:', this)
    })
  },

  // 컴포넌트가 마운트 된 후,
  // 옵션 API 방식의 mounted() 훅을 실행.
  mounted() {
    // `this`를 통해 컴포넌트 인스턴스에 접근할 수 있습니다.
    console.log('mounted()가 호출 되었습니다:', this)
  }
}

위와 같은 형식으로 사용한다.

 

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

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })

    onUpdated(() => {
      console.log('Component updated')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })
  }
}

이 예제에서는 onMounted, onUpdated, onUnmounted 함수를 사용하여 컴포넌트의 마운트, 업데이트, 언마운트 라이프사이클 이벤트를 수신하고, 이벤트 발생시에 각각 적절한 로그 메시지를 출력하고 있습니다.

 

Vue 3의 Composition API에서 제공하는 라이프사이클 함수는 onMounted, onUpdated, onUnmounted 이외에도 다양합니다.

아래는 일부 예시입니다:

• onBeforeMount: 컴포넌트가 DOM에 마운트되기 전에 실행되는 함수입니다.
• onBeforeUpdate: 컴포넌트가 업데이트되기 전에 실행되는 함수입니다.
• onBeforeUnmount: 컴포넌트가 언마운트되기 전에 실행되는 함수입니다.
• onErrorCaptured: 하위 컴포넌트에서 발생한 에러를 처리하는 함수입니다.
• onActivated: <keep-alive> 내부에서 컴포넌트가 활성화될 때 실행되는 함수입니다.
• onDeactivated: <keep-alive> 내부에서 컴포넌트가 비활성화될 때 실행되는 함수입니다.
• onRenderTracked: 컴포넌트가 렌더링될 때 실행되는 함수입니다.
• onRenderTriggered: 컴포넌트가 렌더링되기 전에 실행되는 함수입니다.

위와 같은 라이프사이클 함수 외에도, Composition API는 상태 관리와 관련된 함수들도 다양하게 제공합니다. 이러한 함수들을 활용하면 보다 유연하고 모듈화된 컴포넌트를 작성할 수 있습니다.

 

 

Vue 3의 Composition API에서 가장 많이 사용되는 라이프사이클 함수 5개는 다음과 같습니다:

1. onMounted: 컴포넌트가 DOM에 추가되고 나서 실행되는 함수입니다. 보통 컴포넌트 초기화 작업을 처리하기 위해 사용됩니다.
2. onUpdated: 컴포넌트가 업데이트될 때마다 실행되는 함수입니다. 컴포넌트가 업데이트되기 전의 상태와 업데이트된 이후의 상태를 비교하거나, 컴포넌트가 다시 렌더링되어야 하는지 결정하는 로직을 구현할 때 사용됩니다.
3. onUnmounted: 컴포넌트가 DOM에서 제거되기 전에 실행되는 함수입니다. 보통 컴포넌트의 리소스 해제 작업을 처리하기 위해 사용됩니다.
4. onBeforeMount: 컴포넌트가 DOM에 추가되기 전에 실행되는 함수입니다. 주로 컴포넌트 초기화 이전의 작업을 처리하기 위해 사용됩니다.
5. onBeforeUnmount: 컴포넌트가 DOM에서 제거되기 전에 실행되는 함수입니다. 보통 컴포넌트 해제 이전의 작업을 처리하기 위해 사용됩니다.

위와 같은 라이프사이클 함수들은 컴포넌트의 상태와 렌더링에 관련된 로직을 처리하기 위해 사용됩니다. 하지만 이 외에도 onBeforeUpdate, onActivated, onDeactivated 등 다양한 라이프사이클 함수가 제공되므로, 상황에 따라 적절한 함수를 선택하여 사용할 수 있습니다.

 

예시를 들어 설명해보겠습니다.

 

1. 컴포넌트 마운트 시 초기 데이터 로딩

import { onMounted } from 'vue'
import axios from 'axios'

export default {
  setup() {
    onMounted(() => {
      axios.get('/api/data')
        .then(response => {
          // 데이터 처리 로직
        })
    })
  }
}

컴포넌트가 마운트될 때 onMounted 함수가 실행되며, 서버에서 데이터를 로딩하여 처리하는 예시입니다.

2. 컴포넌트 업데이트 시 스크롤 위치 복원

import { ref, onUpdated } from 'vue'

export default {
  setup() {
    const scrollTop = ref(0)

    onUpdated(() => {
      window.scrollTo(0, scrollTop.value)
    })

    return {
      scrollTop
    }
  }
}

컴포넌트가 업데이트될 때마다 onUpdated 함수가 실행되며, 이전 스크롤 위치를 기억하고 스크롤 위치를 복원하는 예시입니다.

3. 컴포넌트 언마운트 시 리소스 해제

import { onUnmounted } from 'vue'

export default {
  setup() {
    const resource = getResource()

    onUnmounted(() => {
      resource.release()
    })
  }
}

컴포넌트가 언마운트될 때 onUnmounted 함수가 실행되며, 사용한 리소스를 해제하는 예시입니다.

4. 컴포넌트 초기화 시 초기값 설정

import { ref, onBeforeMount } from 'vue'

export default {
  setup() {
    const count = ref(0)

    onBeforeMount(() => {
      count.value = 1
    })

    return {
      count
    }
  }
}

컴포넌트가 마운트되기 전 onBeforeMount 함수가 실행되며, 초기값을 설정하는 예시입니다.