04 리액티브 폼(Reactive Forms) 01

리액티브 폼(Reactive Forms)

리액티브 폼은 리액티브 스타일로 폼을 만들기 위한 Angular기법입니다. 이 가이드에서는 "Hero Detail Editor"폼을 작성하는 단계를 수행함으로써 리액티브 폼에 대해 설명합니다.

리액티브 Forms 라이브 예제 / 다운로드 예제를 사용해 보십시오.

리액티브 폼 데모 / 다운로드 예제 버전을 실행해 볼 수 있으며, 상단의 "데모 피커"에서 중간 단계 중 하나를 선택할 수도 있습니다.

 

리액티브 폼 소개

Angular는 리액티브 폼과 템플릿 기반 폼의 두 가지 폼-구축 기술을 제공합니다. 두 기술은 @angular/forms 라이브러리에 속하며 폼컨트롤 클래스의 공통세트를 공유합니다.

그러나 그들은 철학, 프로그래밍 스타일, 기법에서 두드러지게 엇갈린다. ReactiveFormsModule과 FormsModule과 같은 각기 자체모듈을 가지고 있습니다.

 

리액티브 폼

Angular 리액티브폼은 비UI데이터모델 (일반적으로 서버에서 검색 됨)과 HTML 컨트롤의 상태 및 값을 화면에 보이도록 하는 UI 지향형 폼 모델간의 데이터 흐름을 명시적으로 관리하는 리액티브 스타일을 용이하게합니다. 리액티브폼은 리액티브 패턴, 테스트 및 유효성 검사를 쉽게 사용할 수 있습니다.

리액티브 폼을 사용하면 이 가이드에서 설명하는 기술을 사용하여 컴포넌트 클래스에 Angular 폼 컨트롤 개체 트리를 만들고 이를 컴포넌트 템플릿의 네이티브 폼 컨트롤 엘리먼트에 바인딩할 수 있습니다.

컴포넌트 클래스에서 직접 폼 컨트롤 개체를 만들고 조작할 수 있습니다. 컴포넌트 클래스는 데이터 모델과 폼 컨트롤 구조에 즉시 액세스할 수 있어서, 데이터 모델 값을 폼 컨트롤로 보내고 사용자가 변경 한 값을 다시 가져올 수 있습니다. 컴포넌트는 폼 제어 상태의 변경 사항을 관찰하고 변경 사항에 대응할 수 있습니다.

폼 컨트롤 개체를 사용하여 작업하는 한 가지 이점은 값과 유효성 업데이트가 항상 동기적이고 사용자가 제어할 수 있다는 점입니다. 템플릿 기반 폼에 때로 문제가 되는 타이밍 문제가 발생하지 않으며 리액티브 폼이 단위 테스트를 더 쉽게 수행할 수 있습니다.

리액티브 패러다임을 유지하면서 컴포넌트는 데이터 모델의 불변성을 보존하여 원래 값의 순수한 소스로 취급합니다. 컴포넌트는 데이터 모델을 직접 업데이트하지 않고 사용자 변경사항을 추출하여 외부 컴포넌트 또는 서비스로 전달합니다. 값을 전달받은 컴포넌트 또는 서비스는 변경 사항을 저장하고 업데이트된 모델 상태를 반영하는 새 데이터 모델을 컴포넌트로 리턴합니다.

리액티브 폼 디렉티브를 사용하는 경우 모든 반응적 원칙을 따를 필요는 없지만 사용하도록 선택한 경우 리액티브 프로그래밍 방식을 용이하게 합니다.