컴포넌트 상호 작용

이 단원에서는 Angular에서 컴포넌트가 서로 통신하는 방법, 특히 부모 컴포넌트와 자식 컴포넌트 간의 통신 방법을 배웁니다.

부모-자식 상호 작용

컴포넌트는 데이터를 공유해야 하는 경우가 많습니다. 부모 컴포넌트는 입력 속성을 사용하여 자식 컴포넌트에 데이터를 전달할 수 있습니다.

@Input() 사용하기

@Input() 데코레이터를 사용하여 부모 컴포넌트에서 데이터를 받으세요:

@Input() userData: string;

자식 컴포넌트에 데이터 전달하기

부모 컴포넌트의 템플릿에서 속성 바인딩을 사용하여 데이터를 전달하세요:

<app-child [userData]="parentData"></app-child>

자식에서 부모로 통신하기

자식 컴포넌트는 @Output() 데코레이터를 사용한 이벤트를 통해 부모 컴포넌트와 통신합니다.

@Output() 사용하기

이벤트 이미터를 만들어 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내세요:

@Output() dataEvent = new EventEmitter<string>();

이벤트 발생시키기

자식 컴포넌트에서 이벤트를 발생시키세요:

sendData() {
  this.dataEvent.emit('Hello from Child');
}

부모 컴포넌트에서 이벤트 수신하기

부모 컴포넌트의 템플릿에서 발생한 이벤트를 처리하세요:

<app-child (dataEvent)="handleEvent($event)"></app-child>

요약

이제 Angular에서 입력과 출력을 통해 컴포넌트가 상호 작용하는 방식을 이해했습니다. 계속 연습하세요!