값 작성과 등록
writeValue와 변경 콜백을 구현합니다.
값 작성과 등록은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
두 가지 핵심 메서드
값 접근자의 핵심은 양방향으로 데이터를 전달하는 것입니다. writeValue는 모델 값을 뷰로 가져오고, registerOnChange에서 받은 콜백은 사용자의 수정 사항을 모델로 보냅니다.
writeValue
폼에서 컨트롤의 값을 설정하거나 초기화할 때 Angular가 writeValue를 호출합니다. 뷰에 값이 반영되도록 컴포넌트 상태에 저장하세요.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}null 처리하기
초기화할 때 writeValue가 null을 받을 수 있습니다. 템플릿이 중단되지 않도록 안전한 기본값으로 정규화하세요.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular는 값이 변경될 때마다 호출할 콜백을 전달합니다. 이 콜백을 저장해 두었다가 사용자 상호작용이 발생할 때 호출하세요.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}변경 사항 전달하기
사용자가 상호작용하면 내부 상태를 업데이트하고, 저장해 둔 onChange 콜백을 새 값과 함께 호출하여 폼 모델을 업데이트하세요.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}템플릿 연결하기
템플릿은 현재 상태를 렌더링하고 사용자 동작이 발생하면 처리기를 호출합니다. 처리기는 다시 onChange를 호출합니다.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'뷰 동기화 유지하기
writeValue가 내부 상태를 업데이트하고 템플릿이 해당 상태에 바인딩되므로, 프로그래밍 방식의 폼 변경(예: patchValue)이 컴포넌트에 즉시 반영됩니다.
OnPush와 함께 사용하기
OnPush 변경 감지를 사용할 때는 컴포넌트 필드를 통해 상태를 업데이트하고 바인딩이 반응하도록 하세요. 비동기 소스에서 값을 변경한다면 뷰를 최신 상태로 유지하도록 변경 감지를 실행하거나 신호를 사용하세요.
writeValue에서 onChange를 호출하지 마세요
중요: writeValue 내부에서 onChange를 절대 호출하지 마세요. 프로그래밍 방식의 업데이트가 모델로 다시 전달되어 반복 호출이 발생할 수 있습니다. onChange는 사용자 동작으로 인한 변경에만 사용합니다.
값의 타입 지정
더 안전하게 반응형 폼과 통합할 수 있도록 컨트롤에 구체적인 값 타입(number, string, 사용자 지정 interface)을 지정하고 메서드에도 그 타입을 적용합니다.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}현재까지의 결과
writeValue와 registerOnChange를 구현하면 컨트롤이 폼 모델에서 값을 읽고 폼 모델에 값을 씁니다. 다음으로 완전한 UX를 위해 비활성화 및 터치됨 처리를 추가합니다.
빠른 확인
값 쓰기에 대한 지식을 확인해 보세요.
복습
writeValue(모델에서 뷰로 전달하며 null 처리)를 구현하고, registerOnChange 콜백을 사용해 사용자 변경 사항을 내보냈습니다(뷰에서 모델로 전달). 템플릿을 연결했으며, writeValue에서 onChange를 호출하면 안 된다는 점도 배웠습니다.
자주 묻는 질문
“값 작성과 등록” 강의는 무료인가요?
네 — “값 작성과 등록” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“값 작성과 등록”에서 뭘 배우나요?
writeValue와 변경 콜백을 구현합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“값 작성과 등록” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.