6P by neo 2달전 | favorite | 댓글 2개

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 속성과 속성 같은 경우가 대표적. 하위 호환성 때문에 쉽게 바꾸기는 어려울 것 같지만, 앞으로는 좀 더 일관성 있는 설계가 되었으면 함

attribute 와 property를 같은 "속성" 으로 번역해 버렸네요..