프로퍼티 바인딩, 이벤트 바인딩에 이어 양방향 바인딩에 대해 알아보겠습니다
이번 포스트는 아래 내용을 다루고 있습니다.
- 양방향 바인딩 사용법
- FormsModule
양방향 바인딩
input 요소와 같은 유저 입력 HTML 요소를 사용할 때 화면에서 먼저 컴포넌트의 프로퍼티의 값을 보여주고 유저가 입력할 때 해당 프로퍼티를 업데이트 해야 될 경우가 많이 생깁니다.
위의 예제를 살펴봅시다.
필터 값을 입력 받는 input요소가 있습니다.
이 input요소에는 전에 입력한 값이 있었다면 input에 표시하고,
유저가 입력을 했을때 <h4>쪽에 입력된 필터 텍스트 값을 다시 한번 출력 하고 싶습니다.
(이번 포스트에는 다루지는 않지만 차후에 필터의 텍스트로 테이블을 필터링 하려고 합니다.)
어떻게 이 처리를 원활 하게 처리할 수 있을까요?
이러한 처리를 하기 위해서는 ngModel디렉티브를 사용하는 양방향 바인딩이 필요합니다.
양방향 바인딩 사용법
첫 번째, input요소에서 프로퍼티 바인딩을 나타내는 대괄호[]로 ngModel을 묶어줍니다.
[ngModel]과 같이 프로퍼티 바인딩 모양이 되었네요.
두번째, 사용자가 입력한 텍스트의 알림을 컴포넌트로 다시 보내기 위해 이벤트 바인딩을 나타내는 괄호로 프러퍼티 바인딩 안쪽을 다시 묶습니다.
[(ngModel)]과 같은 모양이 되었고, 이것이 양방향 바인딩의 표기법 입니다.
<h4>에서는 다시 filterText을 보간을 활용해서 표시하게 해놓았습니다.
이렇게 함으로 input에서 입력한 값이 컴포넌트에 업데이트 되고, 다시 그값이 h4에 표시됩니다.
양방향 바인딩을 할때 어떤 순서로 두 개의 괄호를 넣어야 하는지 기억하는 방법 중에 유명한 기억법이 있습니다.
양방향 바인딩을 떠올리때는 상자 안에 들어 있는 바나나를 상상해 보세요.
상자의 바깥쪽에는 정사각형 괄호를, 안쪽에 바나나를 괄호 안에 넣으면 양방향 바인딩 완성입니다.[()]
수정된 컴포넌트클래스와 템플릿은 아래와 같습니다.
컴포넌트의 filterText라는 프로퍼티에 "matrix4"라는 텍스트를 필터의 기본 텍스트로 설정하였습니다.
input에서는 ngModel을 이용해 양방향 바인딩하였으므로 유저가 input 내용을 변경한다면 컴포넌트의 filterText라는 속성도 변경되어 h4의 내용도 업데이트되겠네요.
FormsModule 가져오기
이제 마지막 단계입니다.
디렉티브(directive)는 html를 강화하기 위해 제공하는 사용자 정의 html구문(custom html syntex) 임을 기억하고 계신가요?
ngModel은 앵귤러 디렉티브입니다.
템플릿에서 앵귤러 디렉티브를 사용하고자 할 때마다 Angular 컴파일러에서 디렉티브를 알아볼 수 있도록 하는 방법을 고려해야 합니다.
그 방법은 Angular module에 있습니다.
우리는 지금 AppModule이 소유하고 있는 MovieListComponent에서 ngModel 디렉티브를 사용하려고 합니다.
따라서 AppModule에서는 ngModel directive를 노출하는 적절한 시스템 모듈을 가져와야 합니다.
위 예제를 보면 FormsModule을 Import를 하였습니다.
ngModel은 FormsModule에 속해 있고, ngModel 디렉티브는 데이터 입력 양식을 작성할 때 가장 많이 사용 됩니다.
이제 ngModel과 FormsModules에 있는 디렉티브들을 MovieListComponent를 포함한 AppModule에서 선언된 모든 컴포넌트에서 사용 가능합니다.
잠시 메타데이터를 살펴보겠습니다.
선언(declarations)이 아닌 imports에 FormsModule를 넣었는데, declarations배열에 넣으면 안될까요?
우리가 만든 directive, component 및 pipe는 선언(declarations) 배열에 선언되어 있어야 합니다.
Angular 자체 또는 서드 파티와 같은 다른 소스에서 사용하는 directive, component 및 pipe는 imports 배열에 추가하는 외부 Angular 모듈에 정의하여야 합니다.
이제 브라우저에서 확인해 보도록 하겠습니다.
양방향 바인딩이 잘 작동 하네요.
수고하셨습니다.🎉
양방향 바인딩를 마지막으로 데이터바인딩에 대해서 일단 기본적인 이야기는 끝났습니다.
다음 포스트에선 파이프에 대해서 알아보도록 하겠습니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 13.인터페이스(interface) (0) | 2022.01.23 |
|---|---|
| 앵귤러 기초(Angular basic) 12.파이프(pipe) (0) | 2022.01.22 |
| 앵귤러 기초(Angular basic) 10.이벤트 바인딩(event binding) (0) | 2022.01.20 |
| 앵귤러 기초(Angular basic) 9.프로퍼티 바인딩(property binding) (0) | 2022.01.19 |
| 앵귤러 기초(Angular basic) 8.ngFor (0) | 2022.01.18 |
댓글