필수 입력과 변환된 입력
입력을 필수로 표시하고 값을 변환합니다.
필수 입력과 변환된 입력은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
기본 입력을 넘어
시그널 입력은 두 가지 강력한 기능을 지원합니다. 입력을 필수로 지정하는 기능과 저장하기 전에 전달된 값을 변환하는 기능입니다.
필수 입력
부모가 항상 값을 제공해야 할 때 input.required()를 사용하세요. 기본값은 없습니다.
import { input } from "@angular/core";
export class UserComponent {
userId = input.required<string>();
}필수 입력이 중요한 이유
필수 입력이 바인딩되지 않으면 Angular가 오류를 보고합니다. 정의되지 않은 값이 넘어가도록 두지 않고 실수를 조기에 발견할 수 있습니다.
<!-- error: userId is required -->
<app-user></app-user>
<!-- correct -->
<app-user [userId]="id"></app-user>필수 입력은 null이 될 수 없습니다
필수 입력은 반드시 제공되어야 하므로 타입이 undefined가 될 수 없습니다. 따라서 null 검사를 하지 않고도 안전하게 읽을 수 있습니다.
userId = input.required<string>();
load() {
return this.api.get(this.userId()); // always a string
}입력 변환
transform 옵션은 값을 저장하기 전에 전달된 값에 함수를 적용합니다. 형 변환에 유용합니다.
import { input } from "@angular/core";
export class ToggleComponent {
disabled = input(false, { transform: (v: unknown) => !!v });
}부울 형 변환
Angular는 속성 방식의 값을 실제 부울 값으로 변환하는 booleanAttribute를 제공합니다. 속성의 존재 여부로 의미를 전달할 때 유용합니다.
import { input, booleanAttribute } from "@angular/core";
disabled = input(false, { transform: booleanAttribute });
<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>숫자 형 변환
마찬가지로 numberAttribute는 문자열 속성을 숫자로 변환합니다.
import { input, numberAttribute } from "@angular/core";
count = input(0, { transform: numberAttribute });
<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>사용자 지정 변환 함수
문자열의 앞뒤 공백을 제거하는 것처럼 값을 정규화하는 변환 함수를 직접 작성할 수 있습니다.
label = input("", {
transform: (v: string) => v.trim()
});입력 타입과 출력 타입 변환
변환 함수는 한 타입을 받아 다른 타입으로 저장할 수 있습니다. 부모가 바인딩하는 값은 허용되는 타입이고, 읽게 되는 값은 저장된 타입입니다.
// accepts string | number, stores number
size = input(0, {
transform: (v: string | number) => Number(v)
});필수와 변환 함께 사용하기
input.required()에 옵션 객체를 전달하여 필수 설정과 변환을 결합할 수 있습니다.
value = input.required({
transform: numberAttribute
});각 기능을 사용하는 경우
필수 바인딩을 강제하려면 required를 사용하고, 전달된 데이터를 형 변환하거나 정규화하려면 변환을 사용하세요. 그러면 컴포넌트 로직을 깔끔하고 일관되게 유지할 수 있습니다.
빠른 확인
필수 입력과 변환된 입력에 대한 이해도를 확인해 보세요.
복습
필수 입력에는 input.required()를 사용하세요(널을 허용하지 않으며 기본값이 없음). 값의 형 변환에는 booleanAttribute와 numberAttribute를 포함한 transform 옵션을 사용하세요. 두 기능은 함께 사용할 수도 있습니다.
자주 묻는 질문
“필수 입력과 변환된 입력” 강의는 무료인가요?
네 — “필수 입력과 변환된 입력” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“필수 입력과 변환된 입력”에서 뭘 배우나요?
입력을 필수로 표시하고 값을 변환합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“필수 입력과 변환된 입력” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.