[Angular2 notebook] property binding
이 문서는 ng2에 대한 내용을 다루고 있지만, 전체적으로 디테일하게 다룬다기보다는, ng2의 개념들을 이해해나가면서 조각조각 관련 개념들을 정리하는 데 목적을 둡니다. 따라서, 이 카테고리의 글들은 전체적으로 완결적이지 않을 수 있고, 글의 순서에따라 내용이 이어지지 않을 수 있음을 먼저 알려드립니다.
여기서 다룰 내용은 angular.io(공식홈페이지)의 tutorial에 등작하는 property binding에 대한 내용이다.
개괄적인 내용
- 여기서는 heroes라는 array안에 들어있는 hero객체를 *ngFor 라는 ng2의 template syntax를 활용해리스트를 만든다.
- 만들어진 <li>요소들을 사용자가 마우스로 클릭하면, 클릭한 요소만 style 변화가 일어나게 한다.
- 만약, 사용자가 다른 요소를 클릭하면 이전에 스타일 변화가 있었던 요소는 원래 형태로 돌아가고, 새로 클릭한 요소에 스타일이 적용된다.
<li *ngfor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}} </span> {{hero.name}}
</li>
위 코드 중에서도 한번 다시 곱씹어 정리해보고자한 것은 [class.selected]="hero === selectedHero"부분이다.
이 부분을 이야기하기 전에, 알아야할 것이 있다. 여기서볼 부분은 "우리가 선택한 <li>요소의 class를 'selected'로 변경해주는 부분"이다. 그외의 처리는 다른 메서드에서 이루어진다.
- <li>클릭할 때 어떤 처리를 한다 : (click)=onSelect(hero)의 역할
- 클릭된 <li>의 class를 판단하여 변경한다 : [class.selected]="hero === selectedHero"의 역할 (이글의 주제)
- class가 'selected'인 <li>의 스타일형태를 결정한다 : CSS의 역할
angular2에서의 property 바인딩
ng2에서 property를 바인딩할 때는 대괄호(square brackets, [])를 사용한다.
- 우리는 여기서 heroes array안에 있는 각 hero 데이터들을 *ngFor를 이용해 바인딩하고있다.
- 이로써 각 <li>태그에 하나의 hero 데이터가 바인딩된다.
- 각 <li>태그에 있는 hero값이 현재의 selectedHero값 즉, 현재 선택된 값이라면 이 <li>태그의 class에 selected를 바인딩한다.
즉, 다음과 같이 사용자의 클릭의 결과를 반영한다.
- 선택된 <li>태그일 경우 : <li class="selected">
- 선택되지 않은 <li> 태그일 경우 : <li>
더 자세한 내용을 보려면
Angular2의 property에 대한 더 많은 내용은 다음 페이지에서 자세하게 확인할 수 있다.