Angular Academy · 강의

ControlValueAccessor 인터페이스

사용자 지정 위젯을 Angular 폼에 연결합니다.

ControlValueAccessor 인터페이스은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

사용자 지정 컨트롤이 필요한 이유

Angular 폼은 기본적으로 네이티브 입력 요소와 함께 작동합니다. 직접 만든 컴포넌트(평점 위젯, 색상 선택기, 토글)를 ngModel 및 formControlName과 함께 사용하려면 ControlValueAccessor를 구현해야 합니다.

다리 역할

ControlValueAccessor(CVA)는 Angular의 폼 모델과 컴포넌트 뷰를 연결하는 다리입니다. 모델이 값을 전달하는 방법과 사용자의 변경 사항이 다시 전달되는 방법을 정의합니다.

인터페이스

CVA에는 네 가지 메서드가 필요합니다. writeValue, registerOnChange, registerOnTouched, 선택 사항인 setDisabledState입니다.

interface ControlValueAccessor {
  writeValue(value: any): void;
  registerOnChange(fn: (v: any) => void): void;
  registerOnTouched(fn: () => void): void;
  setDisabledState?(isDisabled: boolean): void;
}

공급자 등록하기

multi: true와 useExisting를 사용하여 NG_VALUE_ACCESSOR를 제공하고, 해당 값이 컴포넌트를 가리키도록 설정하면 Angular에 이 컴포넌트가 값 접근자임을 알릴 수 있습니다.

import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';

providers: [{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RatingComponent),
  multi: true
}]

forwardRef가 필요한 이유

클래스가 정의되기 전에 자체 메타데이터에서 자기 자신을 참조하므로 forwardRef가 필요합니다. 클래스가 존재할 때까지 확인을 지연합니다.

컴포넌트 기본 구조

사용자 지정 컨트롤은 공급자를 선언하고 인터페이스 메서드를 구현합니다. 클래스는 현재 값을 내부에 보관합니다.

@Component({
  selector: 'app-rating',
  providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
  value = 0;
  // writeValue, registerOnChange, registerOnTouched ...
}

네이티브 요소처럼 사용하기

CVA를 구현하면 해당 컴포넌트를 네이티브 입력 요소와 동일하게 템플릿 기반 폼과 반응형 폼에 연결할 수 있습니다.

<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>

데이터의 양방향 흐름

모델에서 뷰로의 흐름은 writeValue를 통해 이루어집니다(Angular가 폼 값을 전달합니다). 뷰에서 모델로의 흐름은 registerOnChange에 등록한 콜백을 통해 이루어집니다(사용자 변경 사항을 전달합니다).

터치 상태 추적

폼 유효성 검사 사용자 경험은 터치됨 상태에 따라 달라집니다. 일반적으로 포커스를 잃을 때 registerOnTouched에서 받은 콜백을 호출하여 Angular에 알립니다.

비활성화 상태

폼에서 컨트롤을 비활성화하면(control.disable()) Angular가 setDisabledState를 호출합니다. 그러면 컴포넌트가 비활성화 상태를 시각적으로 표시하고 입력을 무시할 수 있습니다.

학습 과정

다음 레슨에서는 각 부분을 구현합니다. 값 작성 및 등록, 비활성화 및 터치됨 상태 처리, 유효성 검사 추가를 차례로 다룹니다. 이 기능들이 함께 작동하면 폼에 완전히 통합된 사용자 지정 컨트롤이 완성됩니다.

빠른 확인

CVA의 기본 내용을 확인해 보세요.

요약

ControlValueAccessor가 네 가지 메서드를 통해 사용자 지정 컴포넌트를 Angular 폼에 연결한다는 것을 배웠습니다. 이 메서드는 forwardRef와 multi: true를 사용하여 NG_VALUE_ACCESSOR를 통해 등록합니다. 다음으로 값을 작성하고 등록하는 방법을 구현합니다.

자주 묻는 질문

“ControlValueAccessor 인터페이스” 강의는 무료인가요?

네 — “ControlValueAccessor 인터페이스” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“ControlValueAccessor 인터페이스”에서 뭘 배우나요?

사용자 지정 위젯을 Angular 폼에 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“ControlValueAccessor 인터페이스” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기