[javascript] 웹 컴포넌트의 생명주기(Lifecycle) 이해하기

07 Dec 2023

javascript

웹 컴포넌트는 웹 애플리케이션에서 재사용 가능한 독립적인 UI 요소를 만들기 위한 기술입니다. 이러한 웹 컴포넌트는 일련의 생명주기(Lifecycle)를 가지고 있으며, 각각의 단계에서 특정한 작업을 수행합니다. 이번 포스트에서는 웹 컴포넌트의 생명주기를 자세히 알아보겠습니다.

1. 생성(creation) 단계

웹 컴포넌트의 생성 단계는 컴포넌트가 DOM에 삽입되기 전에 실행됩니다. 다음은 생성 단계에서 호출되는 메서드입니다.

connectedCallback

connectedCallback() { 
  // 컴포넌트가 DOM에 삽입되었을 때 수행할 작업
}

connectedCallback 메서드는 웹 컴포넌트가 DOM에 삽입될 때 실행됩니다. 이 단계에서는 컴포넌트의 초기화 작업을 수행하는 것이 일반적입니다.

2. 업데이트(update) 단계

업데이트 단계는 웹 컴포넌트의 상태가 변경되었을 때 실행됩니다. 이 단계에서는 컴포넌트의 내용을 업데이트하거나 새로운 속성 값에 따라 작업을 수행할 수 있습니다. 다음은 업데이트 단계에서 호출되는 메서드입니다.

attributeChangedCallback

attributeChangedCallback(name, oldValue, newValue) { 
  // 속성 값이 변경될 때 수행할 작업
}

attributeChangedCallback 메서드는 웹 컴포넌트의 속성 값이 변경될 때 호출됩니다. 이 메서드를 사용하여 속성 값의 변경을 감지하고, 필요한 작업을 수행할 수 있습니다.

observedAttributes

static get observedAttributes() { 
  return ['속성1', '속성2', ...]; 
}

observedAttributes 속성은 웹 컴포넌트에서 관찰할 속성을 지정하는 역할을 합니다. 이 값은 배열로 반환되며, attributeChangedCallback 메서드와 함께 사용됩니다.

3. 제거(removal) 단계

제거 단계는 웹 컴포넌트가 DOM에서 제거될 때 실행됩니다. 이 단계에서는 리소스를 해제하거나 정리 작업을 수행할 수 있습니다. 다음은 제거 단계에서 호출되는 메서드입니다.

disconnectedCallback

disconnectedCallback() { 
  // 컴포넌트가 DOM에서 제거될 때 수행할 작업
}

disconnectedCallback 메서드는 웹 컴포넌트가 DOM에서 제거될 때 호출됩니다. 이 단계에서는 컴포넌트에 할당된 리소스를 해제하거나 정리 작업을 수행하는 것이 일반적입니다.

결론

웹 컴포넌트의 생명주기를 이해하는 것은 웹 애플리케이션 개발에서 매우 중요한 부분입니다. 모든 단계에서 필요한 작업을 수행하여 웹 컴포넌트를 올바르게 활용할 수 있도록 하세요.

더 자세한 정보를 원한다면, 아래의 참고 자료를 확인해보세요: