Angular의 자식 컴포넌트

튜토리얼 초반에 언급했듯이, Angular에서는 전체 프로젝트가 컴포넌트로 나뉩니다. 지난 강의들에서 우리는 기본적으로 생성된 메인 컴포넌트만 작업했습니다. 이제 자식 컴포넌트를 생성하는 방법을 배워봅시다.

새 컴포넌트의 코드는 Angular가 특수한 터미널 명령어를 통해 자동으로 생성합니다: generate component. component 단어 뒤에 우리의 새 컴포넌트 이름을 적습니다. user 컴포넌트를 생성하고 싶다고 가정해 봅시다:

ng generate component user

명령어를 실행한 후, 우리에게는 새 폴더 app/user가 생성된 것을 볼 수 있습니다. 그 안에는 컴포넌트의 모든 표준 파일들이 위치하게 됩니다.

컴포넌트 파일 user.component.ts 안에는 컴포넌트 데코레이터가 자동으로 생성될 것입니다:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

또한 이 파일 안에는 컴포넌트 클래스가 자동으로 생성될 것입니다:

export class UserComponent {

}

이제 우리의 자식 컴포넌트를 부모 컴포넌트에 연결해야 합니다. 부모 컴포넌트를 프레임워크 설치 시 기본적으로 존재하는 app 컴포넌트라고 가정합시다. 그 안에 우리의 컴포넌트를 임포트합니다:

import { UserComponent } from './user/user.component';

컴포넌트 데코레이터의 imports 키에 우리가 임포트한 컴포넌트를 지정합니다:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // 여기
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

이제 우리는 자식 컴포넌트의 내용을 부모 컴포넌트에 출력할 수 있습니다. 이를 위해 부모의 템플릿 파일에 이름이 자식의 @Component 데코레이터의 selector 속성에 설정된 특수 태그를 작성해야 합니다. 우리의 경우 이 태그는 app-user입니다. 부모의 템플릿에 이를 작성해 봅시다:

some text
<app-user></app-user>

ProductComponent 컴포넌트를 생성하세요. 이 컴포넌트를 프로젝트의 메인 컴포넌트에 연결하세요.

자식 컴포넌트의 템플릿을 수정하세요. 변경 사항이 브라우저에 적용되는지 확인하세요.

자식 컴포넌트의 CSS 스타일을 변경하세요. 그것들이 브라우저에 적용되는지 확인하세요.

자식 컴포넌트에 name 및 price 속성을 만드세요. 그들의 값을 자식 컴포넌트의 템플릿에 출력하세요.