[개발] 'Attribute' 와 'property' 차이점

'Attribute' 와 'property' 차이점

신입 프론트엔드 개발자 면접을 볼때 가장 많이 받는 질문으로 보인다.

 

Attribute ?

attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다.

예를 들어, <div class= ‘my-class’></div>라는 ‘my-class’라는 클래스 속성을 가진 div 요소에서 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 ‘my-class’ 는 class attribute의 value(값)가 됩니다.

 

Property ?

property는 html DOM 안에서 attribute 를 가리키는(혹은 대신하는) 표현입니다.

 

위 내용은 <div class= ‘my-class’></div> 태그를 DOM 으로 표현한 것인데 위에서 className이 property가 되는 것이죠. 다시 말하면 html 문서 안에서는 class가 attribute를 의미하지만 html DOM 안에서는 property를 의미한다고 보시면 될 것 같습니다.

 

 attribute와 property를 구분하는 차이 또는 차이점이 무엇일까?

attribute는 html document/file 안에서 property 는 html DOM tree안에서 존재합니다. 이것이 뜻하는 것은 attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 것을 내포하고 있습니다. 예를 들어 체크박스 태그가 있을 때 유저가 체크박스에 체크를 하면 attribute의 상태는 변하지 않지만 property의 상태는 checked로 변하게 됩니다.

 

정리하자면,

attribute 는 html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체를 의미하고, property 는 html DOM 안에서 동적인(바뀌는) 속성(또는 그 값)을 의미합니다.