관찰 속성과 attributeChangedCallback

HTML 요소는 속성을 통해 상태를 노출합니다. <my-card name="A">가 name="B"로 바뀔 때 반응하려면 관찰할 속성 목록을 선언하고 클래스에 attributeChangedCallback을 구현하십시오.

정적 접근자를 사용하여 관심 있는 속성을 선언하십시오. static get observedAttributes() { return ["name", "open"]; } 이 목록에 포함된 속성만 콜백을 트리거하고, 다른 속성은 성능을 위해 무시됩니다.

attributeChangedCallback(name, oldValue, newValue)는 관찰 대상인 속성이 변경될 때마다 실행됩니다. 세 매개변수는 모두 문자열이며, 속성이 없으면 null입니다. 이를 사용하여 내부 상태를 업데이트하고 다시 렌더링하십시오.

요소가 업그레이드될 때 존재하는 각 관찰 대상 속성에 대해 콜백이 한 번씩 실행됩니다. 따라서 attributeChangedCallback에서 렌더링하면 connectedCallback에 별도의 경로를 두지 않고도 초기 렌더링과 이후 렌더링을 모두 처리할 수 있습니다.

불리언 속성의 경우 프로퍼티를 속성에, 속성을 프로퍼티에 서로 반영하십시오. element.open = true로 설정하면 open 속성이 설정되고, 속성을 제거하면 프로퍼티가 초기화되어야 합니다. 이는 <details>와 같은 내장 요소의 동작과 일치합니다.

attributeChangedCallback이 자신이 관찰하는 속성을 설정하면 무한 루프에 빠질 수 있습니다. 콜백의 맨 앞에서 항상 if (oldValue === newValue) return;로 방어하고, 콜백 내부에서 관찰 대상 속성을 변경하지 마십시오.

HTML의 규칙에 따라 불리언 속성은 존재하면 "설정"되고(disabled, open), 존재하지 않으면 "해제"됩니다. 속성값은 무시되므로 disabled="false"도 여전히 비활성화 상태입니다. 존재 여부는 hasAttribute로 확인하고 문자열을 비교하지 마십시오.

속성은 문자열입니다. 구조화된 데이터를 전달하려면 마크업에서 JSON.stringify를 사용해 문자열화하고 attributeChangedCallback에서 구문 분석하십시오. <my-chart data-points='[1,2,3]'>처럼 작성할 수 있습니다. 데이터가 큰 경우에는 대신 JS 프로퍼티 할당으로 전달하는 것이 좋습니다.

MutationObserver로 속성 변경을 관찰할 수도 있지만, observedAttributes와 attributeChangedCallback을 사용하는 방식이 더 빠르고(관찰자 설정이 필요 없음), 선언적이며(관찰할 이름 목록이 클래스에 드러남), 웹 구성 요소에 더 일반적인 방식입니다.

여러 속성이 빠르게 연속으로 변경되면 콜백과 렌더링도 여러 번 실행됩니다. queueMicrotask 또는 requestAnimationFrame으로 이를 묶어서 처리하면 속성이 몇 개 변경되었든 실제 렌더링은 마이크로태스크나 프레임마다 한 번만 실행됩니다.

속성을 observedAttributes에 추가하는 것을 잊으면 해당 속성에 대한 콜백이 아무런 표시 없이 비활성화됩니다. 구성 요소가 setAttribute 호출에 반응하지 않는다면 가장 먼저 정적 observedAttributes 목록을 확인하십시오.

콜백 내부에서 관찰 대상 속성을 설정하여 attributeChangedCallback을 간접적으로 호출하면 어떤 일이 발생하나요?

정적 observedAttributes 접근자를 통해 추적할 속성을 선언하십시오. attributeChangedCallback(name, oldValue, newValue)은 초기 구문 분석을 포함해 속성이 변경될 때마다 실행됩니다. 불리언 상태에서는 프로퍼티를 속성에 반영하고, 무한 루프를 방지하며, 성능을 위해 requestAnimationFrame으로 렌더링을 묶어서 처리하십시오.