attr vs attr.name

개발을 하다가 궁금한게 생겼더랬죠.

 

<img [src]="" />

<img [attr.src]="" />

 

 

이 둘의 차이가 뭘까요.

 

https://stackoverflow.com/questions/60375207/when-use-name-vs-attr-name

when use [name] vs [attr.name]?

 

그 대답은 여기서 찾아봤는데요.

 

설명을 시작해보겠습니다.

 

그 전에 가정을 해야합니다.

 

해당 답변은 in-app model 객체가 아닌 HTMLElement의 경우에 속합니다.

 

[attr.{name}] syntax는 오직 DOM HTMLElement 객체들에게만 적용되기 때문이죠.

 

https://angular.io/guide/template-syntax

Angular

---

DOM 인터페이스들은 기본적으로 HTML attribute들을 위한 native property들을 가지고 있습니다.

 

예를들어 HTMLElement DOM 인터페이스에는 id가 명시되어 있는데, 그맇거 때문에 저희가 [id] 이런식으로 binding을 할 수 있습니다.

 

마찬가지로 <a> 태그인 HTMLAnchorElement 역시 [href]로 접근할 수 있죠.

 

하지만, 다른 HTML attribtue들은 DOM 인터페이스에 존재하지 않을 수 있습니다.

 

되게 모던하거나, 사용자가 정의했거나 등의 이유로요.

 

그래서 attributes를 통해서 해당 값에 접근해야합니다.

 

그렇기 때문에 Angular에서 DOM에 정의되지 않는 property에 접근하기 위해서, 직접 [attr.{name}]으로 접근해야합니다.

 

그렇기 때문에 제목의 대답은 아래의 결과로 이어집니다.

 

• 언제 [name]을 쓰고 [attr.name]을 쓰나요 ?
  • 해당 값이 DOM 인터페이스 property인가요 ?
    • 네
      • [name]을 쓰세요
    • 아니요
      • 해당 값이 HTML attribute에 존재하는 값인가요 ? 
        • 네 : [attr.name]을 쓰세요.
        • 아뇨 : 뭔가 이상하네요. 키보드에서 손 떼세요.

---

이상 attr vs attr.name 였습니다. ^_^