Attribute vs Property

attribute 와 property 모두 요소의 속성을 가리킬 때 사용되는 키워드이다. 어떤 차이점이 있는지 살펴보자.

Attribute

먼저 attribute는 HTML 요소의 추가적인 정보를 말한다. react 에서 컴포넌트의 props 를 정의할 때 기본으로 있는 HTML 요소의 props 를 그대로 사용하고 싶다

type TInput = React.InputHTMLAttributes<HTMLInputElement> & {
  setValue: Dispatch<SetStateAction<string>>;
};

이런 식으로 ...HTMLAttributes 를 사용하는데 이것이 바로 HTML 의 속성 그대로 상속 받기 위해 사용되는 것이다.

Property

property는 DOM에서 사용되는 동적인 표현이다. HTML 문서 안에서는 정적으로 attribute로 불리지만, DOM 안에서는 동적인 property로 불리는 것이다.

즉, 같은 className 이 HTML 문서 안에서는 attribute, DOM 안에서는 property 로 불리는 것이다.

input 컴포넌트가 있다고 가정해보자.

<input value="0"/>

const input = document.querySelector('input');
console.log(input.value); // 0
input.value = 10;
console.log(input.value); // 10 -> html 문서에서는 0 그대로

위 예시를 보면 최초 설정한 value 값이 10으로 변경된 것을 볼 수 있다. 하지만 실제 html 태그에서는 value 값은 0이다. property 값이 변경되어도 DOM 객체만 바뀌고, HTML 은 업데이트가 되지 않아 원래의 0 이 그대로 유지되는 것을 볼 수 있다.

추가적으로, 원래 HTML 요소에 없는 속성을 삽입 시, 임의로 지정한 속성이 모두 property로 표현되지 않는다. 따라서 이렇게 임의로 정의한 속성에 접근하기 위해 getAttribute 라는 메서드를 사용해야 한다.

console.log(input.getAttribute('test'));