Angular 공부 ( 컴포넌트간 데이터 전송 [ Input, Output ] )

1. 계층적 트리 구조

- 분할된 컴포넌트를 조립하다보면 자연스레 계층적인 구조가 형성

- 상위 컴포넌트 - 하위 컴포넌트를 '부모-자식' 관계로 표현됨

- 리엑트를 공부할 당시에는 함수형으로 Prop

React : 함수형

프레임워크	컴포넌트 방식	전달방식
React	함수형, 클래스형	Props
Angular	클래스형	데코레이터 (Input, Output)

 

2. 상위 컴포넌트에서 하위 컴포넌트로 상태 전달 ( 부모 → 자식 )

1)상위 - HTML

<app-child [값1]="데이터" [값2]="1"></app-child>

• 값을 props처럼 동일하게 전달 (데이터 값은 ts에서 사용하는 변수)
• 값2처럼 변수뿐만 아니라 값으로도 전달 가능

2) 하위 - TS

export class ParentComponent{
    @Input() 값1:type;
    @Input() 값2:number;
}

• @Input() 데코레이터를 통해 상위 컴포넌트에서 받을 값을 작성
• this.값1 을 이용하여 class에서 선언한 변수처럼 사용

3. 하위 컴포넌트에서 상위 컴포넌트로 상태 전달 ( 자식 → 부모 )

1) 하위 - TS

export class ChildComponent{
    @Output() 값 = new EventEmitter<type>();
    
    기능(value:type){
    	this.값.emit(value);
    }
}

• @Output 데코레이터를 통해 상위 컴포넌트로 값을 전달
• EventEmitter를 통해 Child Component에서 발생할 이벤트 관리
• <type>으로 특정 type으로 한정 할 수도 있고, 생략할 수도 있음.
• 함수를 통해 값을 받아서 emit으로 상위 컴포넌트에 전달 하는 방식

2) 하위 - HTML

<button (click)="기능('아무거나')">버튼<button>

• 인자로 값을 전달할 수 있도록 (하위 컴포넌트의 변화를 통해 값을 전달하도록) 원하는 방식으로 세팅

3) 상위 - TS

export class ParentComponent{
    함수(value:type){
    	console.log(value);
    }
}

• 하위컴포넌트에서 넘겨준 값을 이용하는 방법을 작성

 

4) 상위 - HTML

<app-child (값)="함수($event)"></app-child>

• ()로 묶어서 해당 하위 컴포넌트에서 받아올 값을 설정
• $event를 통해 하위 컴포넌트에서 값이 바뀌면 상위 컴포넌트에서 이벤트형식으로 값을 전달 받아 사용

4. 생명주기 ngOnChanges 메서드

1) ngOnChanges 메서드는 프로퍼티의 변화가 감지되면 호출된다.

- 적어도 하나가 변경된 경우 기본 변경 감지기가 데이터 바인딩된 속성을 확인한 직후와 보기 및 콘텐츠의 자식이 확인되기 전에 호출되는 콜백 메서드

- 상위컴포넌트로 받은 Input이 수정되었을 때 React의 useEffect의 의존성 배열처럼 Input값이 변화한 것을 감지하여 동작한다.

 

2) 사용 예제

import { OnChanges } from '@angular/core';

export class ParentComponent implements{
    @Input() 값1:type;
    @Input() 값2:number;
    
    ngOnChanges(){
    	console.log(값1);
    }
}

• 작성된 Input의 하위 - TS 코드 예제에서 ngOnChanges 함수만 추가하였다.
• 상위 컴포넌트에서 Input으로 받은 값이 변화 할때마다 ngOnChanges()가 동작하므로 유용하게 사용가능하다.

 

참조 :

공식 페이지 :

https://angular.kr/guide/inputs-outputs

Angular 가이드

블로그 :

https://www.heecheolman.dev/post/angular-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%81%ED%83%9C-%EA%B3%B5%EC%9C%A0/

Angular 컴포넌트 상태 공유