종속성 직접 가져오기
모듈 대신 컴포넌트에 가져오기를 추가합니다.
종속성 직접 가져오기은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
종속성 직접 가져오기
Standalone 컴포넌트는 자체 imports 배열에 사용하는 항목을 선언합니다. 이는 NgModule의 선언과 가져오기 분리를 대신합니다.
imports 배열
@Component 데코레이터의 imports 배열에 다른 Standalone 컴포넌트, 지시문, 파이프를 추가합니다.
import { Component } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
imports: [ChildComponent],
template: '<app-child></app-child>'
})
export class ParentComponent {}다른 컴포넌트 가져오기
템플릿에서 자식 컴포넌트를 렌더링하려면 해당 클래스를 가져옵니다. 그러면 그 선택자를 사용할 수 있습니다.
지시문 가져오기
Standalone 지시문도 같은 방식으로 가져옵니다. 가져온 후에는 템플릿에 적용할 수 있습니다.
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'app-note',
imports: [HighlightDirective],
template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}파이프 가져오기
Standalone 파이프도 imports에 추가합니다. 예를 들어 사용자 지정 파이프를 가져오면 보간에서 사용할 수 있습니다.
일반적인 Angular 지시문
일부 내장 도우미는 패키지에서 제공합니다. 예를 들어 RouterLink는 @angular/router에서 제공되므로 사용하려면 가져와야 합니다.
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-nav',
imports: [RouterLink],
template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}FormsModule과 관련 기능
기존 NgModules도 Standalone 컴포넌트로 가져올 수 있습니다. FormsModule을 가져오면 ngModel과 같은 템플릿 기반 폼 기능을 사용할 수 있습니다.
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form',
imports: [FormsModule],
template: '<input [(ngModel)]="name">'
})
export class FormComponent {
name = '';
}내장 제어 흐름에는 가져오기가 필요하지 않음
내장 제어 흐름 블록(if, for, switch, defer)은 템플릿 언어 자체에 포함되어 있으므로 가져오기가 필요하지 않습니다. 이는 이전 구조적 지시문과 다른 점입니다.
사용하는 항목만 가져오기
가져오기를 최소화하세요. 템플릿에서 실제로 참조하는 종속성만 나열합니다. 이렇게 하면 컴포넌트가 간결해지고 트리 셰이킹이 가능해집니다.
여러 항목 가져오기
imports 배열에는 여러 항목을 함께 나열할 수 있습니다.
imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]컴파일 오류가 방향을 제시함
가져오지 않은 선택자나 파이프를 사용하면 Angular가 해당 컴포넌트에서 인식할 수 없다는 명확한 오류를 표시합니다. imports에 추가하면 해결됩니다.
빠른 확인: 가져오기
Standalone 종속성은 어디에 추가하나요?
복습: 직접 가져오기
Standalone 컴포넌트는 다른 컴포넌트, 지시문, 파이프, FormsModule 같은 NgModules를 포함한 종속성을 컴포넌트의 imports 배열에 나열합니다. 내장 제어 흐름에는 가져오기가 필요하지 않습니다. 가져오기는 최소한으로 유지하세요. 다음 주제는 Standalone 앱을 부트스트랩하는 방법입니다.
자주 묻는 질문
“종속성 직접 가져오기” 강의는 무료인가요?
네 — “종속성 직접 가져오기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“종속성 직접 가져오기”에서 뭘 배우나요?
모듈 대신 컴포넌트에 가져오기를 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“종속성 직접 가져오기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.