[LWC]수명주기후크(LifeCycle Hook)

1. 수명 주기 후크란?

LWC에는 수명 주기 후크라는 것이 있다. 이는 구성 요소가 생성되고, DOM에 추가되며, 제거될 때 특정 메서드가 자동으로 실행되는 기능이다.

수명 주기 후크는 Lightning 웹 구성 요소의 특정 상태 변화나 이벤트가 발생할 때 자동으로 호출되는 메서드들이다. 이 메서드들은 구성 요소가 생성되고, 화면에 추가되고, 삭제될 때와 같은 중요한 순간에 코드를 실행할 수 있도록 해준다. 이런 방식으로 특정 이벤트에 대응하는 코드를 작성할 수 있다.

2. 주요 수명 주기 후크

2.1 connectedCallback()

• 언제 호출되는가?
  구성 요소가 DOM에 삽입될 때 호출된다.
• 주로 사용되는 경우:
  데이터를 가져오거나 초기화 작업을 수행할 때 사용된다.

connectedCallback() {
  console.log('Component has been inserted into the DOM!');
}

2.2 disconnectedCallback()

• 언제 호출되는가?
  구성 요소가 DOM에서 제거될 때 호출된다.
• 주로 사용되는 경우:
  타이머를 정리하거나 이벤트 리스너를 제거할 때 사용된다.

disconnectedCallback() {
  console.log('Component has been removed from the DOM.');
}

2.3 renderedCallback()

• 언제 호출되는가?
  구성 요소가 처음으로 렌더링되거나 다시 렌더링된 후 호출된다.
• 주로 사용되는 경우:
  DOM이 완전히 준비된 후에 실행되어야 하는 작업을 수행할 때 사용된다.

renderedCallback() {
  console.log('Component has been rendered.');
}

2.4 errorCallback(error, stack)

• 언제 호출되는가?
  자식 구성 요소에서 처리되지 않은 오류가 발생할 때 호출된다.
• 주로 사용되는 경우:
  오류를 로그로 남기거나 사용자에게 오류 메시지를 표시할 때 사용된다.

errorCallback(error, stack) {
  console.error('Error occurred:', error);
}

3. 예시: 조건부 렌더링에서의 connectedCallback()

이 코드는 구성 요소가 DOM에 삽입될 때 connectedCallback()를 사용하여 자동으로 코드를 실행하는 코드다.

export default class App extends LightningElement {
  ready = false;

  connectedCallback() {
    setTimeout(() => {
      this.ready = true;
    }, 3000);
  }
}

이 코드에서는 3초가 지나면 ready 속성을 true로 설정한다.

export default class App extends LightningElement {
  ready = false;

  connectedCallback() {
    setTimeout(() => {
      this.ready = true;
    }, 3000);
  }
}

4. 수명 주기 후크의 전체 흐름

수명 주기 후크는 구성 요소가 다음과 같은 상태 변화를 겪을 때 순차적으로 호출된다:

1. 생성됨: 구성 요소가 처음 만들어질 때.
2. DOM에 추가됨: 구성 요소가 DOM에 삽입될 때 (connectedCallback() 호출).
3. 브라우저에서 렌더링됨: 구성 요소가 브라우저에 처음으로 렌더링되거나 다시 렌더링될 때 (renderedCallback() 호출).
4. 오류가 발생됨: 자식 구성 요소에서 처리되지 않은 오류가 발생할 때 (errorCallback() 호출).
5. DOM에서 삭제됨: 구성 요소가 DOM에서 제거될 때 (disconnectedCallback() 호출).

요약

• 수명 주기 후크는 LWC에서 특정 시점에 자동으로 실행되는 메서드들이다.
• 주요 후크로는 connectedCallback(), disconnectedCallback(), renderedCallback(), errorCallback() 등이 있다.
• 이 후크들은 구성 요소가 생성, 렌더링, 삭제될 때 등 중요한 순간에 코드를 실행할 수 있게 해준다.