Nuxt.js 애플리케이션을 구축할 때 수명 주기 후크를 이해하는 것은 성능을 미세 조정하고 특정 작업이 발생할 때 제어하는 ​​데 중요합니다. 이 게시물에서는 각 수명 주기 후크를 분석하여 이를 효과적으로 사용하는 방법과 시기를 확실하게 이해할 수 있도록 합니다.

수명주기 후크란 무엇입니까?

Nuxt.js의 라이프사이클 후크를 통해 개발자는 애플리케이션 초기화, 렌더링 및 삭제 프로세스의 특정 단계에서 코드를 실행할 수 있습니다. 이러한 후크는 비동기 데이터 가져오기를 관리하고, 부작용을 처리하거나, 전환을 트리거하는 등의 작업에 사용할 수 있습니다.

Nuxt.js의 주요 수명주기 후크

1. 비동기 데이터

• 호출될 때: 서버와 클라이언트 모두에서 구성 요소가 초기화되기 전입니다.
• 사용 목적: 데이터를 비동기식으로 가져와서 구성 요소에 주입할 수 있습니다. 이 후크는 이에 액세스할 수 없지만 구성 요소의 데이터와 병합될 개체를 반환할 수 있습니다.

export default {
  async asyncData({ params }) {
    const data = await fetchData(params.id)
    return { data }
  }
}

2. 술책

• 호출될 때: 서버 측 렌더링 도중과 구성 요소가 생성되기 전에만.
• 사용 목적: asyncData와 달리 이 후크는 이에 액세스할 수 있으므로 데이터를 가져와서 구성 요소 속성에 직접 할당할 수 있습니다.

export default {
  async fetch() {
    this.data = await fetchData(this.$route.params.id)
  }
}

3. 생성됨

• 호출될 때: 구성 요소 인스턴스가 생성된 후(클라이언트와 서버 모두에서).
• 사용 목적: 구성 요소 상태를 초기화하거나 DOM 렌더링에 의존하지 않는 작업을 트리거하는 데 좋은 장소입니다.

export default {
  created() {
    console.log('Component is created!')
  }
}

4. 마운트됨

• 호출되는 경우: 구성 요소가 DOM에 마운트된 후, 클라이언트 측에서만 가능합니다.
• 용도: 이는 HTML 요소의 존재에 의존하는 타사 라이브러리 초기화와 같은 DOM 관련 작업을 위한 완벽한 후크입니다.

export default {
  mounted() {
    console.log('Component is mounted to the DOM!')
  }
}

5. 파괴하기 전에

• 호출될 때: 구성 요소가 파괴되기 직전(클라이언트와 서버 모두에서).
• 사용 목적: 이 후크를 사용하여 이벤트 리스너 제거와 같은 정리 작업을 수행할 수 있습니다.

export default {
  beforeDestroy() {
    console.log('Cleaning up resources...')
  }
}

6. nuxtServerInit

• 호출될 때: 이는 서버 측 렌더링 전에 트리거되는 Vuex 스토어의 특수 작업입니다.
• 용도: 애플리케이션이 서버에 렌더링되기 전에 사용 가능한 데이터로 스토어를 채울 수 있습니다.

export const actions = {
  async nuxtServerInit({ commit }) {
    const data = await fetchInitialData()
    commit('setData', data)
  }
}

수명주기 후크 요약

• 서버측만: asyncData, fetch, nuxtServerInit
• 클라이언트측만: 마운트됨
• 클라이언트와 서버 모두: 생성, 삭제 전

결론

Nuxt.js 라이프사이클 후크는 렌더링 프로세스의 다양한 단계에서 앱 동작을 제어하기 위한 강력한 도구입니다. 언제, 어떻게 사용하는지 이해하면 애플리케이션의 성능과 사용자 경험을 개선하는 데 도움이 됩니다.