[Angular] 05. 컴포넌트 통신과 폼 처리하기

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

Chapter05. 컴포넌트 통신과 폼 처리하기

학습목표 : 

1. Angular의 프로젝션 사용 방법에 대해 설명할 수 있다.

→Angular의 프로젝션에 대한 사용 방법은 다음과 같다.

- 자식 컴포넌트 템플릿에 <ng-content> 태그를 추가해서 부모 컴포넌트가 보내는 템플릿이 위치할 곳을 지정한다. 라우터를 사용할 때 <router-outlet>을 지정하는 것과 비슷하다.

- 부모 컴포넌트에서는 자식 컴포넌트 태그 안쪽에 원하는 내용을 넣는다. 자식 컴포넌트를 표현하는 태그가 <my-child>라면 다음과 같이 사용하며, 이 코드에서는 <my-child> 태그 안쪽에 있는 <div> 태그가 자식 컴포넌트로 전달된다.

2. 컴포넌트 생명주기에 대해 설명할 수 있다.

→ngAfterContnetInit(): ngContent 디렉티브를 사용해서 자식 컴포넌트에 HTML 조각을 전달하면, 자식 컴포넌트가 초기화 된 이후에 실행된다.

ngAfterContentChecked(): ngContent 디렉티브를 통해 부모 컴포넌트에서 HTML 조각을 받은 직후에 자식 컴포넌트 쪽에서 실행된다. ngContent에 바인딩된 항목이 있으면 이 항목의 값이 변경된 경우에도 실행된다.

3. 템플릿 기반의 폼과 반응형 폼 방식의 차이점에 대해 설명할 수 있다.

→템플릿 기반의 폼과 반응형 폼 방식의 차이점은 다음과 같다.

- 두 방식 모두 폼 데이터를 저장하는 데이터 구조가 있다. 템플릿 기반 폼에서는 디렉티브를 사용해서 템플릿에 모델을 정의하며, 반응형 폼에서는 TypeScript 코드로 모델을 정의하고 HTML 템플릿에 각 항목을 연결한다.

- 반응형 폼에서는 아무 객체나 모델이 될 수 있는 것은 아니다. 모델은 @angular/forms 모듈의 FormControl, FormGroup, FormArray를 사용하는 클래스 객체여야 한다.

- 반응형 폼으로 폼을 구성하더라도, 화면을 구성하는 HTML 템플릿은 여전히 필요하다. 폼 컨트롤이 연결될 HTML 엘리먼트는 템플릿에서 정의해야 한다.

학습내용  : 

이번 차시에서는 컴포넌트 통신과 폼 처리하기에 대해 학습합니다.

5차시 학습에서 중요한 키워드는 [프로젝션(Projection)], [NgForm], [폼 유효성 검사]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[프로젝션(Projection)]

Angular는 부모 컴포넌트 템플릿의 일부분을 자식 컴포넌트 템플릿에 넣을 수 있는 기능을 제공하며, ngContent 디렉티브를 사용한다. 이 기능은 AngularJS에서는 트랜스클루전(transclusion)이라고 했지만, 프로젝션(Projection)이라는 용어로 변경되었다. 

[NgForm]

NgForm은 폼 전체를 가리키는 디렉티브이며, 폼 모듈을 로드하면 모든 엘리먼트에 이 디렉티브가 자동으로 적용된다. 

[폼 유효성 검사]

폼 유효성 검사는 템플릿 기반의 폼과 반응형 폼 모두 사용할 수 있으며, TypeScript 함수로 만든 유효성 검사기(validator)를 사용한다.

학습요약 : 

 

• 애플리케이션을 구성하는 각 컴포넌트는 서로 독립적이어야 하고, 다른 컴포넌트를 최대한 신경 쓰지 않는 것이 좋다. 이렇게 컴포넌트들의 결합도를 낮게 유지하면서 서로 데이터를 주고 받으려면 중개자 패턴(The Mediator pattern)을 사용하는 것이 좋으며, 위키피디아 문서 중에 “캡슐화된 객체 간 연동하기” 문서를 찾아보는 것도 좋다. 

• Angular는 부모 컴포넌트 템플릿의 일부분을 자식 컴포넌트 템플릿에 넣을 수 있는 기능을 제공하며, ngContent 디렉티브를 사용한다. 이 기능은 AngularJS에서는 트랜스클루전(transclusion)이라고 했지만, 프로젝션(Projection)이라는 용어로 변경되었다. 사용 방법은 아주 간단하다.

 자식 컴포넌트 템플릿에 <ng-content> 태그를 추가해서 부모 컴포넌트가 보내는 템플릿이 위치할 곳을 지정한다. 라우터를 사용할 때 <router-outlet>을 지정하는 것과 비슷하다.

 부모 컴포넌트에서는 자식 컴포넌트 태그 안쪽에 원하는 내용을 넣는다. 자식 컴포넌트를 표현하는 태그가 <my-child>라면 다음과 같이 사용하며, 이 코드에서는 <my-child> 태그 안쪽에 있는 <div> 태그가 자식 컴포넌트로 전달된다.

template : ‘

…

<my-child>

   <div>Passing this div to the child</div>

<my-child>

…

‘

• innerHTML로 직접 바인딩하기

 컴포넌트 프로퍼티에 HTML 조각을 저장하고 있다면, 이 내용을 컴포넌트 템플릿의 innerHTML 프로퍼티로 직접 바인딩할 수도 있다.

<p [innerHTML]=”myComponentProperty”></p>

하지만 innerHTML을 바인딩하는 것보다는 ngContent를 사용하는 것이 좋다.

 innerHTML은 브라우저에 따라 동작하지 않을 수 있다. ngContent느 Angular에서 제공하는 기능이다.

 ngContent를 사용하면 여러 구역에 나뉘어 전달될 HTML을 한 번에 지정할 수 있다.

 ngContent를 사용하면 부모 컴포넌트의 프로퍼티를 HTML에 실어 전달할 수 있다.

• 컴포넌트 생명주기와 관련된 함수 

 ngAfterContnetInit(): ngContent 디렉티브를 사용해서 자식 컴포넌트에 HTML 조각을 전달하면, 자식 컴포넌트가 초기화 된 이후에 실행된다.

 ngAfterContentChecked(): ngContent 디렉티브를 통해 부모 컴포넌트에서 HTML 조각을 받은 직후에 자식 컴포넌트 쪽에서 실행된다. ngContent에 바인딩된 항목이 있으면 이 항목의 값이 변경된 경우에도 실행된다. 

 ngAfterViewChecked(): 컴포넌트 템플릿에 바인딩된 항목의 값이 변경되면 실행된다. 이 함수는 컴포넌트 내부나 외부에서 발생한 변경 사항을 반영하기 위해 여러 번 호출될 수 있다.

• HTML 표준 폼은 다음과 같은 점에서 SPA에 적합하지 않다.

 각 입력 필드에 유효성 검증 로직이 적용되어야 한다.

 에러 메시지는 문제가 발생한 입력 필드 근처에 표시되는 것이 좋다.

 연관된 항목은 유효성 검사를 할 때도 같이 검사해야 한다. 이 폼에는 비밀번호를 받는 필드와 비밀번홀르 확인하는 필드가 연관되어 있기 때문에, 어느 한 필드의 값이 변경되면 다른 필드도 다시 검사해야 한다.

 데이터를 서버로 보낼 때 애플리케이션에서 이 과정을 조작할 수 있어야 한다. 이 말은 사용자가 제출 버튼을 클릭했을 때 폼의 데이터를 원하는 이벤트 핸들러 함수로 보낼 수 있어야 한다는 것이다. 그리고 이 함수에서 데이터의 유효성이나 형식을 확인하고, 필요한 경우에는 폼의 데이터를 원하는 형태로 변환해서 서버로 보낼 수 있어야 한다.

 데이터를 서버로 보낼 때 일반적인 HTTP 요청이나 AJAX 요청으로 보낼지, WebSocket을 사용할지 결정할 수 있어야 한다.

• Angular에서 폼을 처리하는 방식은 템플릿 기반 폼 방식과 반응형 폼 방식이 있다. 두 방식은 서로 다른 API를 사용하는데, 템플릿 기반 폼은 템플릿에서 디렉티브를 사용하고 반응형 폼은 클래스 코드에서 폼 컨트롤을 사용한다. 

• 템플릿 기반의 폼과 반응형 폼 방식의 차이점

 두 방식 모두 폼 데이터를 저장하는 데이터 구조가 있다. 템플릿 기반 폼에서는 디렉티브를 사용해서 템플릿에 모델을 정의하며, 반응형 폼에서는 TypeScript 코드로 모델을 정의하고 HTML 템플릿에 각 항목을 연결한다.

 반응형 폼에서는 아무 객체나 모델이 될 수 있는 것은 아니다. 모델은 @angular/forms 모듈의 FormControl, FormGroup, FormArray를 사용하는 클래스 객체여야 한다.

 반응형 폼으로 폼을 구성하더라도, 화면을 구성하는 HTML 템플릿은 여전히 필요하다. 폼 컨트롤이 연결될 HTML 엘리먼트는 템플릿에서 정의해야 한다. 

• 템플릿 기반의 폼에서는 모델을 정의할 때 디렉티브만 사용할 수 있으며, 이때 사용되는 디렉티브는 FormModule에 있는 NgModel, NgModelGroup, NgForm이다. 

 NgForm은 폼 전체를 가리키는 디렉티브이며, 폼 모듈을 로드하면 모든 <form> 엘리먼트에 이 디렉티브가 자동으로 적용된다. 

• 일반적인 데이터 바인딩과 비교해볼 때 폼 API를 사용하면 폼의 유효성을 검사하는 로직을 구현할 때 좀 더 편하다. 

• 폼 유효성 검사는 템플릿 기반의 폼과 반응형 폼 모두 사용할 수 있으며, TypeScript 함수로 만든 유효성 검사기(validator)를 사용한다. 다만, 반응형 폼에서는 유효성 검사기를 직접 사용하고, 템플릿 기반의 폼에서는 유효성 검사기를 커스텀 디렉티브로 변환해서 사용한다.