수명 주기 콜백
연결, 연결 해제, 속성 변경 시점에 동작을 연결합니다.
수명 주기 콜백은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
요소 수명 주기
사용자 지정 요소에는 정해진 수명 주기가 있습니다. 브라우저는 중요한 시점마다 클래스의 특수 메서드를 호출합니다.
connectedCallback— DOM에 추가될 때disconnectedCallback— DOM에서 제거될 때attributeChangedCallback— 관찰 중인 속성이 변경될 때adoptedCallback— 새 문서로 이동될 때
connectedCallback
connectedCallback은 요소가 문서에 삽입될 때마다 실행됩니다. 콘텐츠를 렌더링하거나 데이터를 가져오거나 전역 리스너를 연결하기에 가장 적합한 위치입니다.
요소가 여러 곳으로 이동되면 여러 번 실행될 수 있습니다.
class StatusBadge extends HTMLElement {
connectedCallback() {
this.textContent = 'Online';
console.log('badge added to page');
}
}
customElements.define('status-badge', StatusBadge);disconnectedCallback
disconnectedCallback은 요소가 DOM에서 제거될 때 실행됩니다. 메모리 누수를 방지하려면 전역 리스너를 제거하거나 타이머를 취소하거나 연결을 닫는 등 정리 작업에 사용하세요.
class ClockWidget extends HTMLElement {
connectedCallback() {
this.timer = setInterval(() => {
this.textContent = new Date().toLocaleTimeString();
}, 1000);
}
disconnectedCallback() {
clearInterval(this.timer); // cleanup
}
}
customElements.define('clock-widget', ClockWidget);속성 관찰하기
속성 변경에 반응하려면 이름 배열을 반환하는 정적 observedAttributes 게터를 사용하여 관찰할 속성을 선언해야 합니다.
목록에 포함된 속성만 attributeChangedCallback을 실행합니다.
class AvatarImage extends HTMLElement {
static get observedAttributes() {
return ['src', 'alt'];
}
}
customElements.define('avatar-image', AvatarImage);attributeChangedCallback
관찰 중인 속성이 추가되거나 제거되거나 변경되면 브라우저가 attributeChangedCallback(name, oldValue, newValue)를 호출합니다. 렌더링된 출력이 속성과 동기화된 상태를 유지하도록 이 메서드를 사용하세요.
class AvatarImage extends HTMLElement {
static get observedAttributes() { return ['src']; }
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'src') {
this.innerHTML = '<img src="' + newValue + '">';
}
}
}
customElements.define('avatar-image', AvatarImage);콜백 인수
attributeChangedCallback은 인수 세 개를 받습니다.
name— 변경된 속성oldValue— 이전 값(새로 추가된 경우 null)newValue— 새 값(제거된 경우 null)
불필요한 작업을 건너뛰려면 이전 값과 새 값을 비교하세요.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return; // no real change
console.log(name + ' changed to ' + newValue);
}초기 속성 호출
요소가 업그레이드될 때 이미 관찰 중인 속성을 가지고 있다면 connectedCallback보다 먼저 각 속성에 대해 attributeChangedCallback이 한 번씩 실행됩니다. 따라서 마크업에서 자동으로 초기화할 수 있습니다.
// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.속성을 프로퍼티에 반영하기
자바스크립트 프로퍼티를 노출하여 속성을 읽고 쓰도록 하는 방식이 일반적인 패턴입니다. 이렇게 하면 사용하기 편리한 프로그래밍 인터페이스를 유지하면서도 두 값을 동기화할 수 있습니다.
class AvatarImage extends HTMLElement {
static get observedAttributes() { return ['src']; }
get src() { return this.getAttribute('src'); }
set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);adoptedCallback
adoptedCallback은 요소가 한 문서에서 다른 문서로 이동될 때 실행됩니다(예를 들어 document.adoptNode를 통해 iframe으로 이동할 때). 자주 필요하지는 않지만 수명 주기를 완성하는 콜백입니다.
class PortableWidget extends HTMLElement {
adoptedCallback() {
console.log('moved to a new document');
}
}
customElements.define('portable-widget', PortableWidget);수명 주기 순서
HTML에 직접 작성된 요소의 일반적인 순서는 다음과 같습니다.
constructorattributeChangedCallback(존재하는 각 관찰 속성에 대해 한 번씩)connectedCallback
그 후 요소를 제거하면 disconnectedCallback이 실행됩니다.
종합하기
완전한 요소는 모든 부분을 연결합니다. 속성을 관찰하고, 연결될 때 렌더링하며, 속성이 변경되면 동기화하고, 연결이 끊기면 정리합니다.
class GreetUser extends HTMLElement {
static get observedAttributes() { return ['name']; }
connectedCallback() { this.render(); }
attributeChangedCallback() { this.render(); }
render() {
const name = this.getAttribute('name') || 'Guest';
this.textContent = 'Hello, ' + name;
}
}
customElements.define('greet-user', GreetUser);빠른 확인
수명 주기 콜백에 대한 지식을 확인해 보세요.
복습
사용자 지정 요소의 수명 주기를 배웠습니다.
connectedCallback은 삽입될 때 실행됩니다. 여기에서 렌더링하세요.disconnectedCallback은 제거될 때 실행됩니다. 여기에서 정리하세요.observedAttributes는 관찰할 속성을 선언합니다.attributeChangedCallback(name, old, new)은 변경 사항에 반응합니다.adoptedCallback은 문서 간 이동을 처리합니다.
다음으로 Shadow DOM을 사용하여 스타일과 마크업을 캡슐화하겠습니다.
자주 묻는 질문
“수명 주기 콜백” 강의는 무료인가요?
네 — “수명 주기 콜백” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“수명 주기 콜백”에서 뭘 배우나요?
연결, 연결 해제, 속성 변경 시점에 동작을 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“수명 주기 콜백” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.