GN⁺: HTML 속성(Attributes)과 DOM 프로퍼티(Properties)의 차이점
(jakearchibald.com)HTML 속성과 DOM 속성의 차이점
HTML 속성과 DOM 속성은 근본적으로 다른 것들임. 같은 이름의 속성과 속성을 가질 수 있지만 서로 다른 값으로 설정할 수 있음.
-
속성과 속성의 주요 차이점
- HTML 직렬화: 속성은 HTML로 직렬화되지만 속성은 그렇지 않음
- 값 타입: 속성 값은 항상 문자열이지만 속성은 모든 타입이 될 수 있음
- 대소문자 구분: 속성 이름은 대소문자를 구분하지 않지만 속성 이름은 대소문자를 구분함. 하지만 속성 값은 대소문자를 구분함
-
반영(Reflection)
- 편의를 위해 대부분의 스펙은 정의된 모든 속성에 대해 속성 등가물을 만듦
- 속성이 속성을 반영할 때 속성은 데이터의 소스임. 속성을 설정하면 속성이 업데이트되고, 속성에서 읽으면 속성을 읽음
- 하지만 일부 반사체는 더 복잡함. 때로는 속성 이름과 반영하는 속성 이름이 다르기도 함
-
유효성 검사, 타입 강제 변환 및 기본값
- 속성에는 유효성 검사와 기본값이 있지만 속성에는 없음
- 일부 속성은 타입 강제 변환을 수행함
-
input 필드의 value
- value 속성과 value 속성이 있지만 value 속성은 value 속성을 반영하지 않음. 대신 defaultValue 속성이 value 속성을 반영함
- value 속성은 어떤 속성도 반영하지 않음. 이는 드문 일이 아니며 offsetWidth, parentNode 등 많은 속성이 그러함
- value 속성은 처음에는 defaultValue 속성을 따름. 그런 다음 JavaScript나 사용자 상호작용을 통해 value 속성이 설정되면 내부 값으로 전환됨
-
속성은 구성을 위한 것이어야 함
- 속성은 구성을 위한 것이어야 하고, 속성은 상태를 포함할 수 있어야 함
- light-DOM 트리는 단일 소유자를 가져야 함
- <details>와 <dialog> 요소는 open 상태를 open 속성으로 표시하고, 브라우저는 사용자 상호작용에 대한 응답으로 이 속성을 자체적으로 추가/제거함. 이는 설계상 실수라고 봄
-
프레임워크의 차이점 처리
- Preact와 VueJS는 propName in element이면 prop을 속성으로 설정하고, 그렇지 않으면 속성을 설정함. 속성보다 속성을 선호함
- React는 그 반대로 함. 속성을 선호하는 미리 정의된 경우를 제외하고는 속성을 설정함.
- lit-html은 속성과 속성의 구분을 유지하며, 속성 대신 속성을 설정하려면 이름 앞에 .을 붙여야 함
GN⁺의 의견
-
HTML 속성과 DOM 속성의 차이점을 아는 것은 저수준의 DOM 작업 시 중요함. 대부분의 경우에는 큰 차이가 없지만, 프레임워크 사용 시 주의가 필요함
-
속성은 설정(configuration)을, 속성은 상태(state)를 나타내는 것으로 구분하는 것이 바람직해 보임. 최근 일부 HTML 요소에서는 이를 지키지 않고 있어 아쉬움
-
특히 React에서 사용자 정의 엘리먼트를 사용할 때는 주의가 필요함. React는 사용자 정의 엘리먼트의 속성을 속성 대신 속성으로 설정하기 때문에, 속성 전용인 것들은 작동하지 않을 수 있음. 이는 React 19에서 개선될 예정
-
Preact, Vue, React, lit-html 등 주요 프레임워크들이 속성과 속성을 어떻게 처리하는지 비교해 보는 것도 흥미로움. 각 프레임워크의 철학과 디자인 결정이 반영되어 있음
-
웹 표준과 브라우저의 구현이 항상 개발자 친화적이지는 않음. <input> 요소의 value 속성과 속성 같은 경우가 대표적. 하위 호환성 때문에 쉽게 바꾸기는 어려울 것 같지만, 앞으로는 좀 더 일관성 있는 설계가 되었으면 함