template-driven 폼과 reactive 폼의 차이는 무엇인가요?

Question

Accepted Answer

Angular는 폼에 대해 **두 가지 접근법**을 제공합니다. **Template-driven** 폼은 단순하며 HTML에 정의됩니다. **Reactive** 폼은 TypeScript에 정의되며 더 많은 제어를 제공합니다 — 복잡하거나, 동적이거나, 검증이 많은 폼에 더 적합합니다. ## Template-driven — 로직이 템플릿에 있음 ```ts // 단지 FormsModule만 import; TS는 최소한 ``` ```html ``` 폼 구조와 검증이 `ngModel` directive를 통해 **템플릿**에 존재합니다. 설정이 간단하지만, 폼 모델이 암묵적이고 프로그래밍 방식으로 테스트/조작하기 더 어렵습니다. ## Reactive — 폼 모델이 TypeScript에 있음 ```ts import { FormBuilder, Validators } from "@angular/forms"; export class SignupComponent { constructor(private fb: FormBuilder) {} form = this.fb.group({ email: ["", [Validators.required, Validators.email]], password: ["", [Validators.required, Validators.minLength(8)]], }); onSubmit() { if (this.form.valid) console.log(this.form.value); } } ``` ```html ``` 폼은 TS에서 만드는 **명시적 객체**(`FormGroup`/`FormControl`)입니다. 이로 인해 관찰 가능하고, 테스트 가능하며, 조작하기 쉽습니다(필드 추가/제거, `valueChanges`를 통한 변경 반응). ## 비교 ```text Template-driven Reactive 정의 위치 HTML (ngModel) TypeScript (FormBuilder) 폼 모델 암묵적/비동기 명시적, 동기적 객체 검증 템플릿의 directive 코드의 validator 동적 폼 어려움 쉬움 (코드에서 컨트롤 추가/제거) 테스트 용이성 더 어려움 간단함 (그냥 객체일 뿐) 적합한 경우 단순한 폼 복잡/동적/검증 폼 ``` ## reactive 폼은 스트림을 노출한다 ```ts this.form.get("email")!.valueChanges.subscribe(v => ...); // 변경에 반응 this.form.valid; // 동기적 유효성 검사 ``` ## 왜 중요한가 올바른 폼 접근법 선택은 유지보수성에 중요합니다. **template-driven**은 빠르고 단순한 폼에, **reactive**는 복잡한 모든 것(다단계 마법사, 동적 필드 집합, 필드 간 검증, 단위 테스트가 필요한 폼)에 적합합니다. Reactive 폼의 명시적이고 관찰 가능한 모델은, 더 많은 사전 코드가 필요하더라도 더 강력하고, 테스트 가능하며, 확장 가능하기 때문에 진지한 애플리케이션에서 일반적으로 선호됩니다.