0Pricing
HTML Academy · 강의

connectedCallback 및 disconnectedCallback

사용자 지정 요소가 DOM에 추가되거나 제거될 때 코드 실행하기

connectedCallback 및 disconnectedCallback은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

요소 수명 주기 콜백

사용자 지정 요소는 네 가지 수명 주기 훅을 제공합니다. connectedCallback, disconnectedCallback, attributeChangedCallback, adoptedCallback입니다. 이는 모든 구성 요소 모델에서 잘 알려진 마운트, 언마운트, 업데이트 시점에 대응합니다.

삽입될 때 connectedCallback 실행

connectedCallback은 요소가 DOM 트리에 삽입될 때마다 실행됩니다. 속성을 읽고, 콘텐츠를 render하고, 이벤트 리스너를 연결하며, 타이머나 구독을 시작하기에 적절한 위치입니다.

class Timer extends HTMLElement {
  connectedCallback() {
    this.start = Date.now();
    this.interval = setInterval(() => this.render(), 1000);
    this.render();
  }
  render() {
    this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
  }
}

두 번 이상 실행될 수 있습니다

요소가 제거되었다가 다시 삽입되면 삽입될 때마다 connectedCallback이 다시 실행됩니다. 멱등성이 중요합니다. 한 번만 수행해야 하는 초기화는 플래그로 보호하거나, 매번 전체 설정을 수행하고 disconnectedCallback에서 해제하도록 하십시오.

제거 시 disconnectedCallback 실행

disconnectedCallback은 요소가 DOM에서 제거될 때 실행됩니다. 인터벌을 중지하고, 가져오기 요청을 중단하고, 문서 수준 리스너를 제거하며, 그렇지 않으면 누수될 리소스를 해제하는 곳입니다.

disconnectedCallback() {
  clearInterval(this.interval);
  window.removeEventListener("resize", this.onResize);
}

가비지 컬렉션과 리스너

활성 인터벌, 문서 리스너 또는 해결되지 않은 프라미스를 가진 요소는 연결이 끊긴 후에도 가비지 컬렉션되지 않습니다. connectedCallback에서 만든 모든 구독은 disconnectedCallback에서 반드시 정리하십시오.

이동 후 재연결

parentB.appendChild(element)로 요소를 이동하면 먼저 기존 부모에서 요소가 제거된 다음 새 부모에 삽입됩니다. 브라우저는 disconnectedCallback을 호출한 다음 connectedCallback을 호출합니다. 이동 중에 일시적인 해제와 설정이 발생할 수 있도록 설계하십시오.

초기 연결 시점

HTML에 직접 작성된 요소의 경우 connectedCallback은 생성자 다음에 초기 구문 분석 중 실행됩니다. 이 시점에는 속성이 이미 구문 분석되어 있으므로 this.getAttribute("name")을 읽으면 마크업의 값이 반환됩니다.

자식 요소는 아직 구문 분석되지 않았을 수 있음

HTML에 자식 요소가 선언된 요소의 경우 connectedCallback이 실행될 때 자식 요소가 아직 DOM에 없을 수 있습니다(구문 분석이 아직 진행 중이기 때문입니다). 선언된 자식 요소에 접근해야 한다면 MutationObserver를 사용하거나 requestAnimationFrame 내부에서 자식 요소를 읽으십시오.

adoptedCallback

adoptedCallback은 요소가 새 문서로 이동할 때(일반적으로 document.adoptNode를 통해) 실행됩니다. 대부분의 앱에서는 사용하지 않으며, 주로 iframe 사이에서 이동하는 구성 요소에 중요합니다.

AbortController와 함께 사용하기

깔끔한 패턴은 connectedCallback에서 AbortController를 만들고, 모든 addEventListener와 fetch에 { signal: this.controller.signal }을 전달한 다음, disconnectedCallback에서 this.controller.abort()를 호출하여 모두 한 번에 제거하는 것입니다.

생성자에서 무거운 작업 피하기

요소가 document.createElement로 생성되고 삽입되지 않더라도 생성자는 실행됩니다. 생성자에서는 초기 프로퍼티 값 설정만 수행하고, 렌더링과 데이터 가져오기 및 리스너 연결은 connectedCallback으로 미루십시오.

지식 확인

구독과 타이머를 요소의 생성자가 아니라 connectedCallback에서 설정해야 하는 이유는 무엇인가요?

요약

connectedCallback(삽입)과 disconnectedCallback(제거)은 요소의 활성 수명이 시작되고 끝나는 지점을 이룹니다. connectedCallback에서 리스너, 인터벌, 가져오기 요청을 설정하고 disconnectedCallback에서 해제하여 누수를 방지하십시오. 둘 다 여러 번 실행될 수 있으므로 AbortController를 사용해 깔끔하게 묶어서 정리하십시오.

자주 묻는 질문

“connectedCallback 및 disconnectedCallback” 강의는 무료인가요?

네 — “connectedCallback 및 disconnectedCallback” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“connectedCallback 및 disconnectedCallback”에서 뭘 배우나요?

사용자 지정 요소가 DOM에 추가되거나 제거될 때 코드 실행하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“connectedCallback 및 disconnectedCallback” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. customElements.define으로 요소 정의하기
  2. connectedCallback 및 disconnectedCallback
  3. 관찰 속성과 attributeChangedCallback
  4. 기본 제공 요소 확장하기
← HTML Academy(으)로 돌아가기