# HTML 속성(Attributes)과 DOM 프로퍼티(Properties)의 차이점

> Clean Markdown view of GeekNews topic #14523. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=14523](https://news.hada.io/topic?id=14523)
- GeekNews Markdown: [https://news.hada.io/topic/14523.md](https://news.hada.io/topic/14523.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-04-27T09:58:57+09:00
- Updated: 2024-04-27T09:58:57+09:00
- Original source: [jakearchibald.com](https://jakearchibald.com/2024/attributes-vs-properties/)
- Points: 6
- Comments: 2

## Topic Body

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

## Comments



### Comment 24931

- Author: superwoou
- Created: 2024-05-03T12:41:51+09:00
- Points: 1

https://emewjin.github.io/html-attribute-dom-property/

### Comment 24734

- Author: superwoou
- Created: 2024-04-27T12:32:52+09:00
- Points: 1

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