Attribute vs Property

둘 다 html 태그의 속성을 의미하지만 세부적으로 다른 특성을 띈다

Attribute

<div className="test-div">
    <img src="./testimg.jpg" />
</div>

html 문서에서 각 원소 태그에 추가적인 정보를 주기 위한 요소이다

위의 예시에서 className, src가 Attribute이며, “test-div” 와 “./testimg.jpg”는 각각 div attribute와 img attribute의 value가 된다

Property

<input value="안녕하세요"/>

html이 아닌, html DOM에서의 속성

(DOM이란? html DOM)

간단하게 말해서 자바스크립트 등의 스크립트 언어를 통해 DOM의 노드들을 수정할 수 있고, Property 또한 자바스크립트에서 동적으로 조작할 수 있다

위의 예시에서 html에 명시된 value attribute는 “안녕하세요” 인데, input 태그의 특성상 value 값을 수정할 수 있다

따라서 input 태그의 attribute는 “안녕하세요" 이고, property는 내부에 입력하는 값으로 계속 변경될 것이다

 

(attribute: 정적, property: 동적)

 

리액트 컴포넌트에서 props로 값을 받아 화면에 출력하거나 스크립트를 통해 조작하는 경우에도 동적이므로 property라고 할 수 있겠다

참고자료

https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-attribute%EC%99%80-property%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90