03-05 데이터 바인딩

데이터 바인딩

프레임워크가 없으면 데이터 값을 HTML 컨트롤로 푸시하고 사용자 응답을 작업 및 값 업데이트로 변환 할 책임이 개발자에게 있습니다. 그러한 푸시/풀 로직을 직접 작성하는 것은 지루하고 오류가 발생하기 쉽고 숙련된 jQuery 프로그래머가 입증할 수 있기 때문에 악몽처럼 읽을 수 있습니다.

Angular는 템플릿의 일부를 컴포넌트의 일부와 조율하는 메커니즘인 데이터 바인딩을 지원합니다. 템플릿 HTML에 바인딩 마크업을 추가하여 Angular에 양면을 연결하는 방법을 알려줍니다.

그림에서 볼 수 있듯이 네 가지 형태의 데이터 바인딩 구문이 있습니다. 각 양식은 방향(DOM으로, DOM에서부터, 또는 양방향)을 나타냅니다.

HeroListComponent 예제 템플릿에는 세 가지 형식이 있습니다.

src/app/hero-list.component.html (binding)

<li>{{hero.name}}</li> <hero-detail [hero]="selectedHero"></hero-detail> <li (click)="selectHero(hero)"></li>

l  {{hero.name}} 보간법은 <li> 엘리먼트 내에 컴포넌트의 hero.name 프로퍼티 값을 표시합니다.

l  [hero] 프로퍼티 바인딩은 selectedHero 값을 부모 HeroListComponent에서 자식 HeroDetailComponent의 hero 프로퍼티로 전달합니다.

l  사용자가 영웅의 이름을 클릭하면 (click) 이벤트 바인딩이 컴포넌트의 selectHero 메서드를 호출합니다.

양방향 데이터 바인딩은 ngModel 지시어를 사용하여 프로퍼티 및 이벤트 바인딩을 단일 표기법으로 결합하는 중요한 네 번째 형식입니다. 다음은 HeroDetailComponent 템플릿의 예입니다.

src/app/hero-detail.component.html (ngModel)

<input [(ngModel)]="hero.name">

양방향 바인딩에서 데이터 프로퍼티 값은 프로퍼티 바인딩과 마찬가지로 컴포넌트의 입력 박스로 이동합니다. 또한 사용자의 변경 사항은 컴포넌트로 다시 전달되어 이벤트 바인딩과 마찬가지로 등록 정보를 최신 값으로 재설정합니다.

Angular는 모든 자식 컴포넌트를 통해 응용프로그램 컴포넌트 트리의 루트에서 JavaScript 이벤트 사이클마다 한 번씩 모든 데이터 바인딩을 처리합니다.

데이터 바인딩은 템플릿과 해당 컴포넌트 간의 통신에서 중요한 역할을 합니다.

데이터 바인딩은 부모 컴포넌트와 자식 컴포넌트 간의 통신에도 중요합니다.