[Angular] 커스텀 프로퍼티 바인딩과 이벤트 바인딩

모든 컴포넌트의 프로퍼티는 해당하는 컴포넌트의 내부에서 접근 가능하다.

상위 컴포넌트에서 하위컴포넌트로 바인딩하는 형태이다.

즉 상위 컴포넌트가 하위 컴포넌트로 데이터를 전달 할 수 있다.

 

가령

<app-test [element]='hello'></app-test>

이러한 코드가 있다면  app-test 컴포넌트에서 Input 을 사용하여 element를 받아야 한다.

 

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './app-test.component.html',
  styleUrls: ['./app-test.component.css']
})
export class AppComponent {
  @Input() element;
  
}

이런식으로 @Input 을 사용하여 프로퍼티를 받는다. 리액트의 props와 유사하다.

이렇게 받은 element는 내부에서 선언한 변수처럼 this.element로 접근 할 수 있다.

이때 element의 변수명은 당연히 일치해야 하지만 바꿀 수도 있다.

 

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './app-test.component.html',
  styleUrls: ['./app-test.component.css']
})
export class AppComponent {
  @Input('element') hello;
  
}

 

이런식으로 사용하면 외부에서 element로 바인딩한 값을 컴포넌트 내부에서는 hello변수로 접근할 수 있게 된다.

 

이벤트 바인딩은 하위 컴포넌트가 상위 컴포넌트로 값을 전달 할 수 있다.

 

 

 

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

@Component({
  selector: 'app-test',
  templateUrl: './app-test.component.html',
  styleUrls: ['./app-test.component.css']
})
export class AppComponent {
  @Output() newEvent = new EventEmitter();
  
  
  eventPush(){
    this.newEvent.emit({test: '123'});
  }
}

하위 컴포넌트의 코드이다. newEvent라는 객체를 new EventEmitter() 로 생성했다.

 

this.newEvent.emit({test: '123'}); 

=> newEvent를 발생시키고 인자로 {test: '123'} 오브젝트를 넘기겠다는 것이다.

 

 

 

해당하는 이벤트를 받기 위한 상위 컴포넌트의 템플릿 코드이다

<app-test (newEvent)="takeEventDate($event)"></app-test>

app-test 에서 newEvent가 발생했을때 takeEventDate 함수를 실행 시킨다는 뜻이다.

$event는 예약변수라고 이전 글에서 이미 설명 했따

 

이 상위 컴포넌트의 컴포넌트 파일에서는 이제 takeEventData(a) 함수를 만들고 a를 콘솔로 찍어보면 

{test: '123'} 객체가 콘솔에 출력되는걸 확인 할 수 있다.