[Angular]@Input@Ouput 컴포넌트 데이터 공유하는 방법

[Angular]@Input@ouput 컴포넌트 데이터 공유하는 방법

Angular에서 컴포넌트 간에 데이터를 주고 받기 위해 사용되는 것이 바로 @Input(), @Ouput() 데코레이터이다. @Input()은 부모 컴포넌트에서 자식 컴포넌트로, @Output()은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용합니다.

@Input()

@Input() 데코레이터는 자식 컴포넌트/디렉티브에 있는 특정 프로퍼티(어떠한 값)가 부모 컴포넌트/디렉티브에서 값을 받는다는 것을 지정하는 데코레이터다.

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

자식 컴포넌트 설정

1. @Input 심볼 로드 import { Component, Input } from '@angular/core';
2. 프로퍼티에 @Input 데코레이터를 지정 @Input() item = '';
3. 자식 컴포넌트에 부모 컴포넌트에서 받은 데이터 사용<p> Today's item: {{item}} </p>

import { Component, Input } from '@angular/core'; // Input 심볼을 로드

export class ItemDetailComponent {
  @Input() item = ''; // 프로퍼티에 @Input() 데코레이터를 지정
}

<p>
  Today's item: {{item}}
</p>

부모 컴포넌트 설정

1. 부모 컴포넌트 템플릿에 자식 컴포넌트 셀렉터를 추가 <app-item-detail></app-item-detail>
2. 프로퍼티 바인딩으로 부모 컴포넌트의 프로퍼티를 자식 컴포넌트의 프로퍼티로 바인딩 <app-item-detail [item]="currentItem"></app-item-detail>
3. 부모 컴포넌트 클래스에서 부모 컴포넌트의 프로퍼티에 값을 할당한다. currentItem = 'saichoi';

export class AppComponent {
  currentItem = 'Television';
}

<app-item-detail [item]="currentItem"></app-item-detail>

@Output()

@Output() 데코레이터는 자식 컴포넌트/디렉티브에서 부모 컴포넌트/디렉티브로 데이터를 전달할 수 있다. 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해서는 이벤트를 발생시켜야하는데 이때  @Output() 데코레이터는 반드시 EventEmitter 타입의 프로퍼티에 선언해야 한다. 이 커스텀 이벤트 클래스는 @angular/core 패키지에서 제공하는 클래스다.

부모 컴포넌트로 데이터 전달하기

자식 컴포넌트 설정하기

1. 자식 컴포넌트 클래스 파일에 Output, EventEmitter 심볼을 로드 import { Output, EventEmitter } from '@angular/core';
2. 컴포넌트 클래스에서 프로퍼티에 @Output() 데코레이터를 지정 @Output() newItemEvent = new EventEmitter<string>();
3. 자식 컴포넌트에 매서드 추가

   addNewItem(value: string) {
     this.newItemEvent.emit(value);
   }

   addNewItem() 함수는 @Output() 데코레이터가 지정된 newItemEvent를 활용해서 이벤트를 발생시키며, 이 때 <input> 엘리먼트에 사용자가 입력한 값을 함께 전달합니다.

import { Output, EventEmitter } from '@angular/core';

export class ItemOutputComponent {

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

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>output-child
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>

사용자가 <input>에 입력한 value 값을 가지고 와서 자식 컴포넌트의 addNewItem 매서드의 인자값으로 받는다.

부모 컴포넌트 설정하기

1. 자식 컴포넌트에서 받아온 값을 부모 컴포넌트의 매서드를 이용해 프로퍼티에 담기

   export class AppComponent {
     items = ['item1', 'item2', 'item3', 'item4'];
   
     addItem(newItem: string) {
       this.items.push(newItem);
     }
   }

2. 부모 컴포넌트 템플릿에 데이터를 로드

   <app-item-output (newItemEvent)="addItem($event)"></app-item-output>
   
   <ul>
     <li *ngFor="let item of items">{{item}}</li>
   </ul>

   $event는 자식 컴포넌트에서 받아온 데이터다. 이 예제에서는 <input>으로 넘겨준 데이터를 의미한다.

@Input(), @Output 함께 사용하기

하나의 컴포넌트에서 @Input(), @Output을 동시에 사용할 수도 있다.

<app-input-output
  [item]="currentItem"
  (deleteRequest)="crossOffItem($event)">
</app-input-output>