Lifecycle Hooks

api를 조회해 뷰에 표시해줄 때 mounted에서 처리하는 것이 좋을까 created에서 처리하는 것이 좋을까?

 

각 Vue component 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어 데이터 관찰을 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 mount하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 LifeCycle Hooks라는 기능도 실행하여 사용자가 특정 단계에서 자신의 코드를 추가할 수 있도록 합니다.

---

Lifecycle Hooks 등록

예를 들어, mouted hook는 component가 초기 렌더링을 완료하고 DOM 노드를 만든 후 코드를 실행하는데 사용할 수 있습니다.

export default {
    mounted() {
        console.log(`the component is now mounted.`)
    }
}

인스턴스 생명주기의 다른 단계에서 호출되는 다른 hooks도 있으며, 가장 일반적으로 사용되는 것은 mounted, update, unmounted입니다.

모든 라이프 사이클 hooks는 현재 활성 인스턴스를 호출하는 컨텍스트와 함께 호출됩니다. 이는 라이프사이클 hook을 선언할 때 화살표 함수를 사용하지 않아야 한다는 것을 의미합니다. 그러면 this를 통해 구성 요소 인스턴스에 액세스 할 수 없습니다.

---

Lifecycle Diagram

아래는 인스턴스 생명주기를 위한 다이어그램입니다. 지금 일어나고 있는 모든 것을 완전히 이해할 필요는 없지만, 더 많이 배우고 구축할수록 유용한 참고 자료가 될 것입니다.

모든 라이프 사이클 hooks 및 해당 사용 사례에 대한 자세한 내용은 Lifecycle Hooks API reference를 참조하십히오.

---

beforeCreate

인스턴스가 초기화될때 호출

• type

interface ComponentOptions {
    beforeCreate?(this: ComponentPublicInstance): void
}

• 상세
  • 인스턴스가 초기화될 때 Props확인 후 data() 또는 computed등의 다른 옵션을 처리하기 전에 즉시 호출됩니다.
  • Composition API의 setup() hook는 옵션 API 후크나 create()이전에도 호출됩니다.

---

created

인스턴스가 모든 상태 관련 옵션을 처리한 후에 호출됩니다.

• type

interface ComponentOptions {
    created?(this: ComponentPublicInstance): void
}

• 상세
  • 이 hook가 호출되면 relative data, computed properties, methods, and watchers가 설정됩니다.그러나 마운트 단계까 시작되지 않았고 $el속성은 아직 사용할 수 없습니다.

---

beforeMount

컴포넌트가 마운티드 되기 바로 전에 호출됩니다.

• type

interface ComponentOptions {
    beforeMount?(this: ComponenetPublicInstance): void
}

•  상세
  • 이 hook가 호출되면 component 가 활성 상태 설정을 마쳤으나 아직 DOM 노드가 생성되지 않았습니다. DOM렌더 효과를 처음으로 실행하려고 합니다.
  • 이 hook는 서버 측 렌더링 중에 호출하지 않습니다.

---

mounted

컴포넌트가 마운티드 된 후에 호출됩니다.

• Type

interface ComponentOptions {
    mounted?(this: ComponentPublicInstance): void
}

• 상세
  • 컴포넌트는 다음과 같은 경우 mounted된 것으로 간주합니다.
    • 모든 asynchronous child component가 마운트되었습니다(비동기 구성요소 또는 <Suspense> 트리 내부의 component는 포함되지 않음).
    • 자체 DOM 트리가 생성되어 상위 컨테이너에 삽입되었습니다. 응용프로그램의 루트 컨테이너도 문서 내에 있는 경우에만 구성요소의 DOM 트리가 문서 내에 있음을 보장합니다.