Angular Component간의 연결(Angular Each Component relation)

[서론]

Angular는 Component(이하 컴포넌트)를 기반으로 개발을 진행하게 된다. 컴포넌트를 기반으로 개발을 하다 보면 컴포넌트들 간의 상하관계가 발생하고 이렇게 상하 관계가 발생 하게 되면 특정 컴포넌트의 이벤트에 의한 값이 자신이 포함 하고 있는 하위 컴포터넌트로 전달 되거나 혹은 그 반대로 자신이 포함하고 있는 하위 컴포터넌트의 이벤트 값을 받아서 처리 해야 할 수도 있다. 이번 포스티에서는 컴포넌트 간의 이벤트 전달에 대해서 설명한다. Angular에서는 컴포터넌트 들이 서로 데이터를 전달 받고 전달할 수 있도록 @Inputs(), @Output() 어노테이션으로 변수를 선언 할 수 있는데, @Input의 경우 하위 컴포넌트로 값을 전달 하기 위한 변수 설정이다. @Output같은 경우는 하위 컴포터넌트에서 상위 컴포터넌트로 값을 전달 하기 위한 어노테이션이다. 또는 @Input같은 경우는 @Component 어노테이션 안의 inputs 속성을 이용해서 설정할 수 있다.

여기서 두개의 어노테이션은 모두 값을 전달하고 받기 위한 하위 컴포넌트에서 선언한다.

값을 받는 경우 위에서 설명한 설정외에는 별 다른 설정 없이 값을 받아서 쓸 수 있지만, 값을 전달 하는 경우는 조금 더 설정이 필요하다. 바로 EventEmitter라는 클래스를 사용해서 값을 상위 컴포넌트로 전달 하게 된다. 본격적으로 소스 코드를 보면서 예시로 적용된 소스들을 살펴 본다. 해당 글을 읽으시는 분들은 Angular에 대한 기본 설정에 대한 지식 있다는 전제하에 설정에 대한 소스 코드는 생략한다.

[Parent가 되는 Component]

 

import {Component, OnInit} from "@angular/core"; import {BoardService} from "../../service/board/BoardService"; import {Board} from "../../domain/Board"; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/first'; @Component({ selector: 'study-boardlist', templateUrl : '../../htmls/board/studyBoardList.html' }) export class StudyBoardListComponent implements OnInit{ private viewStudyCode: number[] = null; private studyPCode: number = 100; private boards: Board[] = null; constructor(private boardService: BoardService) {} ngOnInit() { //초기 값 가져와용 } viewStudyCodeEvent(viewStudyCode: number[]) { this.viewStudyCode = viewStudyCode; } studyPCodeEvent(studyPCode: number) { this.studyPCode = studyPCode; this.viewStudyCode = []; } }

위 소스는 Parent가 되는 StudyBoardList컴포넌트이다. 이 컴포넌트 소스를 보게 되면 viewPCodeEvent, studyPCodeEvent 두개의 메소드가 있는데 해당 메소드를 사용하여 자식 컴포넌트로 부터 값을 전달 받는데 사용하게 된다.

[Parent가 되는 HTML]

<div class="panel panel-primary"> <div class="panel-heading"> <study-filter (emitViewStudyCodes)="viewStudyCodeEvent($event)" (emitStudyPCode)="studyPCodeEvent($event)"></study-filter> </div> <div class="panel-body"> <h3>게시글 불러 들일 코드 테스트</h3> <h1>{{studyPCode}}</h1> <span *ngFor="let board of viewStudyCode"> <h4>{{board}}</h4> </span> </div> </div>

(1)study-filter라는 태그가 StudyComponent의 하위 컴포넌트의 selector이다. 이 태그에서는 (emitViewStudyCodes)="viewStudyCodeEvent($event)", (emitStudyPCode)="studyPCodeEvent($event)" 를 사용하여 부모 컴포넌트가 하위 컴포넌트로의 값을 받게 해준다. 여기서 emitViewStudyCodes와 emitStudyPCode는 하위 컴포넌트에서 @Output(),  EventEmitter를 사용한 변수명이된다. 

여기 까지 하면 부모 컴포넌트에서 자식의 값을 전달 받기 위한 준비는 끝이 나게 된다. 

[Child가 되는 Component]

자식이 되는 컴포넌트로 부터 부모 컴포넌트로 값을 전달 하기 위해서 자식 컴포넌트는 @Output(), EventEmitter를 사용한 변수를 선언해야한다. 이렇게 선언된 변수는 (1)에서 설명 한 것과 같이 사용된다.

export class StudyFilter implements OnInit { private code; private codeName; //초기 글로벌 값으로 설정 - event에 의해 조작 되야한다 private parentStudyCodes: StudyCode[]; //초기 글로벌 값으로 설정 private studyCodes: StudyCode[]; private renderSC: StudyCode[]; private viewStudyCode : number[] = new Array(); @Output() emitViewStudyCodes = new EventEmitter<number[]>(); @Output() emitStudyPCode = new EventEmitter<number>(); constructor(private codeService : CodeService ) { }

StudyFilter 컴포넌트의 일부분만을 나타냈으며 위 3가지 소스 코드에서 설정 했던대로 하면 하위 컴포넌트에서의 값이 상위 컴포넌트로 전달 된다.

[데모]

[결론]

웹어플리케이션을 개발 하면서 화면은 점점 복잡하게 이루어지게 된다. 이렇게 복잡해 지는 화면은 특정 역할을 하는 화면들로 나눠 질 수 있다. 예를 들면 한 화면 내에서 친구 목록을 나타내는 화면, 게시글을 나타내는 화면으로 나눠 지는 것을 생각 해 볼 수 있다. 이 처럼 화면상 독립적으로 움직이는 컴포넌트가 있는 반면 위의 데모에서와 같이 필터 조건에 의해서 특정 컴포넌트가 바뀌는 동작을 하고 싶다면 @Input() 또는 @Output, EventEmitter를 사용해서 값을 주고 받을 수 있게 된다.