속성(Attribute)과 프로퍼티(Propertie)

 

속성과 프로퍼티는 혼동하기 쉽고 전혀 다른 것이라고 인식하지 못하기도 합니다.

 

이는 속성은 프로퍼티에 매핑되어 있고 실시간 동기화가 설정되어 있기 때문입니다. (항상 그런 것은 아닙니다.)

 

 

<input id="input-1" class="input-default" value="Enter text...">

예를 들어 id, CSS class, value가 있는 input 요소가 있습니다.

 

참고하실 점은 이 세 가지는 DOM 객체가 생성될 때 다르게 반응하며 해당 객체의 프로퍼티가 초기화하는 방법도 다릅니다.

 

이 세 가지는 HTML 코드에서 작성하기 때문에 속성이라고 부르며 HTML 코드에 배치된 속성이 됩니다.

 

즉, HTML 태그에 추가하는 것은 해당 태그의 속성이 되는 것입니다.

 

브라우저가 이 속성으로 수행하는 작업은 태그 이름을 기반으로 DOM 객체를 생성하는데 위의 경우 태그 이름은 input이고,

 

이것을 미리 구성해서 속성을 기반으로 일부 프로퍼티를 미리 구성하게 됩니다.

 

속성이 HTML 코드에 있고 결국 HTML 텍스트에 포함되기 때문입니다.

 

프로퍼티는 HTML 코드를 기반으로 생성된 객체에 저장된 값입니다.

 

DOM 객체가 있든 없든 상관없이 JavaScript 객체에 프로퍼티가 있습니다.

 

물론 DOM 객체에도 프로퍼티가 있고 이 프로퍼티는 DOM 객체에서 렌더링 된 DOM 노드의 구성, 설정, 위치 지정을 반영합니다.

 

HTML 코드를 작성할 때 속성의 개념은  생성된 DOM 객체에 특정한 기본 구성을 제공하는 것입니다.

 

이것이 속성이 하는 일이고 프로퍼티로 변환되는 방법입니다.

 

 

---

 

const inputEx = document.getElementById("input-1"); // input 태그의 id에 접근하여 상수에 할당

console.log(inputEx.id + "\n" + inputEx.className + "\n" + inputEx.value);

/*
 input-1
 input-default
 Enter text... 출력
 */

예를 들어 위의 input 요소에 접근하여 상수에 저장하고 이름을 inputEx이라고 가정하면 id뿐만 아니라 className, value를 읽을 수 있습니다.

 

여기서 중요한 점은 모든 속성이 프로퍼티에 일대일 매핑되는 것은 아니지만 input id는 일대일로 매핑되어 id 속성과 id 프로퍼티가 있습니다.

 

const inputEx = document.getElementById("input-1");

inputEx.id = "newInputId"; // 프로퍼티 변경

프로퍼티의 값을 변경하면 속성의 값도 변경됨

만약 속성 값을 바꾸면 프로퍼티 값이 업데이트되고 프로퍼티 값을 바꾸면 속성 값이 업데이트됩니다. 실시간으로 동기화가 진행되는 것입니다.

 

 

 

 

const inputEx = document.getElementById("input-1");

inputEx.className = "newInputClass"; // 프로퍼티 변경

프로퍼티의 값을 변경하면 속성의 값도 변경됨

class의 경우도 다른 className을 입력해도 실시간으로 동기화가 되어 프로퍼티를 바꾸면 속성도 변하고 속성을 바꾸면 프로퍼티가 변하지만 이름이 동일하지 않아서 일대일 매핑은 없습니다. 

 

HTML 태그에서 input의 class는 DOM 객체의 className 프로퍼티로 변환되는데 중요한 것은 항상 속성 이름과 프로퍼티 이름이 같은 것은 아닙니다.

 

 

const inputEx = document.getElementById("input-1");

inputEx.value = "newInputValue";

console.log(inputEx.value); // newInputValue 출력 
                            // 출력값은 value 프로퍼티의 값을 출력한 것

프로퍼티의 값을 변경했지만 속성의 값은 변경되지 않음

value의 경우 일대일 매핑이 돼서 속성 값과 프로퍼티 값이 있지만 실시간 동기화는 진행되지 않습니다. 

 

한쪽 방향으로만 작용해서 프로퍼티 입력값을 바꿔도  속성에 반영되지 않고, 속성을 바꾸는 경우에만 프로퍼티 값이 변합니다.

 

예를 들어 위의 input 요소는 사용자 입력을 위해 존재하는데  이것을 속성에 다시 반영하고 싶다는 것은 HTML 코드를 작성한 개발자가 어느 시점에 value의 속성을 저장하고 싶다고 해당 input의 초깃값을 리셋하는 것과 같습니다.

 

이것은 불가능한 일입니다. 이유는 사용자 input 값을 value 속성에 반영하려고 하면 거기에 할당하려는 원래 값을 잃어버려서 리셋할 수 없기 때문입니다.

 

그래서 사용자가 사용자 타입을 입력하면 value 프로퍼티에 저장되지만 HTML 코드에는 반영되지 않습니다.

 

즉, 프로퍼티의 값을 변경하려면 속성의 값을 변경해주어야 합니다.