컴포넌트 기반 개발시에 어떤 설계방식으로 해야하는지 알아본다. 새롭게 알게된 GistRun 서비스를 사용해서 테스트해 볼 것이다. 예제의 내용은 최근 Rangle.io의 Angular2 Component 온라인 강좌를 참조한다.
GistRun 사용하기
github기능중 코드 조각을 관리할 수 있는 서비스가 있다. 한번에 최대 10개까지 파일을 만들 수 있다. 여기를 클릭해 보면 Gist에 입력한 한 주제에 대한 파일을 보여주고 Gist의 내역을 테스트 해 볼 수 있다.
plunker 또는 jsfiddle의 내용도 불러와서 나의 Gist에 저장을 할 수 있다. 각 서비스의 장점이 있지만 일단 GistRun은 UI가 깔끔하고 속도가 빠르다. 그리고 수정사항에 대한 버전을 관리할 수 있고, Github의 종속된 서비스이므로 소스를 관리한다는 입장에 일관성을 가질 수 있을 것으로 보인다. Gist만으로 모자랐던 것을 GistRun이 생명력을 불어 넣은 격이다.
Angular2 Component 가이드
Angular2는 컴포넌트로 시작해서 컴포넌트로 끝난다. 컴포넌트기반으로 UI를 설계할 때 자주 나오는 방식이 프리젠테이션과 컨테이너의 분리이다.
- Container 컴포넌트
+ 데이터와 비즈니스 로직을 다룬다
+ 컴포넌트 트리(Tree)를 렌더링 한다
+ 재사용하기 어렵다
- Presentational 컴포넌트
+ 상태를 포함하지 않는다. 따라서 컴포넌트 속성에 대한 수순(pure) 펑션으로 구성한다
+ 표현만을 담당한다
+ 재사용이 가능하다
Thinking in React의 내용은 Angular2의 컴포넌트 개발 방식과 거의 일치한다. Container 컴포넌트는 하위 컴포넌트의 이벤트에 대해 XHR 요청을 수행하는 Angular2 Service를 Inject해서 서버로 부터 데이터를 요청하고, Component Tree를 통해 하위로 데이터를 내려 보낼 수 있다.
오렌지색 부분은 전체 애플리케이션을 감싸는 Container이고 초록색은 테이블의 Row를 표현한다. 프리젠테이션 부분은 상단의 Search Input, 하단의 Row들이 된다. Angular2에서 검색을 위한 Input과 Button, Title 애플리케이션을 다음과 같이 진행한다.
Seach The Site 레이블을 표현하는 컴포넌트를 개발한다. @은 Typescript의 Decorator를 이용해 Angular2에 구현된 것으로 Parent -> Child 방향으로 DOM Properties를 통해 값을 받고자 할 때 사용한다. 즉, RangleLabel 컴포넌트를 사용하는 Parent 컴포넌트가 name 속성에 [] 을 이용해 값을 설정한다.
- 컴포넌트를 사용할 때 [name]="<expression>" [name] 부분을 target이라 하고 <expression> 부분을 source라고 한다.
- []을 사용할 때 source는 항상 template expression 즉, 식이어야 한다. (statement "문"은 이벤트에서 사용함)
- target에 []가 있으면 source는 항상 expression으로 수행된다.
import { Component, Input } from 'angular2/core';
@Component({
selector: 'rangle-label',
template: '<label class="rangle-label">{{ name }}</label>',
styles: [ `
.rangle-label {
color: #422D3F;
display: block;
font-weight: bold;
letter-spacing: .2em;
text-transform: uppercase;
}
`]
})
export class RangleLabel {
@Input() private name: string;
}
예) 부모 컨테이너에서 사용할 때: 부모 컨테이너 컴포넌트의 name 속성을 자식 컴포넌트인 rangle-label에 내려보낸다.
<rangle-label [name]="name"></rangle-label>
다음으로 Input 컴포넌트를 만든다. value 속성에 대해 ngModel처럼 양방향 바인딩을 주기 위해서는 컨벤션(Convention)처럼 Input은 value이고, Output은 valueChange이어야 한다.
- [()] 표식은 banana in the box 표현으로 양방향 데이터 바인딩이다.
- [] 은 Input으로 parent -> child로 속성값을 내려 보낼 수 있다. (top down)
- () 은 Output으로 child -> parent로 값을 올려 보낼 수 있다. (bubble up)
import { Component, Input, Output, EventEmitter } from 'angular2/core';
@Component({
selector: 'rangle-text-field',
template: `
<input class="rangle-text-field"
[placeholder]="placeholder"
#field (keyup)="handleKeyup(field.value)">
`,
styles: [ `
.rangle-text-field {
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-weight: inherit;
height: 2.5rem;
padding: .5rem;
}
`]
})
export class RangleTextField {
@Input() private placeholder: string;
@Input() private value: String;
@Output() private valueChange = new EventEmitter<String>();
handleKeyup(fieldValue: string): void {
this.valueChange.emit(fieldValue);
}
}
예) 부모 컨테이너에서 사용할 때 searchTerm은 부모 컨테이너 컴포넌트의 속성이다. value를 내려보내기도 하고, 이벤트를 받기도 한다.
<rangle-text-field
placeholder="Enter Keyword"
[(value)]="searchTerm">
</rangle-text-field>
버튼을 만들어 보자. 템플릿의 target=source 에서 target이 ()로 감싸지면 이벤트를 나타내고 source는 statement "문"을 쓴다. expression과 statement에 대한 이해는 Angular.io의 Template Syntax 설명을 참조한다. 여기서는 클릭이 되면 바로 부모의 handleSearch가 호출된다.
import { Component, Input, Output, EventEmitter } from 'angular2/core'
@Component({
selector: 'rangle-button',
template: `
<button
[ngClass]="dynamicStyles()"
class="rangle-button"
(click)="onClick.emit()">
{{ name }}
</button>
`,
styles: [ `
:host {
display: flex;
align-items: stretch;
}
.rangle-button {
border: none;
border-radius: 3px;
color: white;
font-weight: bold;
letter-spacing: .2em;
margin-left: 0.5rem;
padding: 0.5rem;
text-transform: uppercase;
}
.primary {
background: #E5373A;
}
.normal {
background: #422D3F;
}
`]
})
export class RangleButton {
@Input() name: string;
@Input() isPrimary: boolean;
@Output() onClick = new EventEmitter();
dynamicStyles() {
return this.isPrimary ? 'primary' : 'normal';
}
}
예) 부모 컨테이너 컴포넌트에서 사용할 때, handleSearch는 부모 컨테이너 컴포넌트의 메소드이다.
<rangle-button name="Search"
[isPrimary]="true"
(click)="handleSearch(searchTerm)">
</rangle-button>
다음으로 Input 과 Button 컴포넌트를 재사용할 수 있는 컨테이너를 만들어 본다. Label만을 포함하고 있고 언제는 원하는 형태로 Input과 Button을 템플릿상에 포함 시킬 수 있다. 이를 위해 ng-content 태그를 사용한다. Angular v1의 transclude와 유사하다. 하지만 큰 차이점은 역시 Angular2의 컴포넌트 아키텍쳐는 Comopnent Tree이기 때문에 Change Detection(CD)는 항시 가장 위에서 아래로 점검되고 렌더링된다. Angular v1은 parent - child 관계가 있다하더라도 Parent가 먼저 렌더링 될지 Child가 먼저될지 보장을 못했다. (물론 Directive에 priority 옵션이 있지만 적용하기에 따라 순서가 정확한지 알 수 없었다.) 즉, Angular2에서 ng-content 태그를 사용해도 렌더링에 예측이 가능하다.
import { Component, Input } from 'angular2/core';
import { RangleLabel } from './rangle-label';
@Component({
selector: 'rangle-bar',
directives: [ RangleLabel ],
template: `
<rangle-label [name]="name">
</rangle-label>
<div class="row">
<ng-content></ng-content>
</div>
`,
styles: [`
:host {
background: #F8F8F8;
border: solid #ccc 1px;
display: block;
padding: 1rem;
margin: 1rem;
}
.row {
display: flex;
margin-top: 0.5rem;
}
`]
})
export class RangleBar {
@Input() name: string;
}
당연히 <ng-content>에는 input, button 컴포넌트외에 다양한 컴포넌트가 올 수 있다. 결과는 다음과 같다.
실데이터를 요청하는 코드는 RangleBar 에서 XHR에 대한 요청을 하고 결과를 전달하는 과정을 거치면 될 된다. Redux를 사용한다면 Action Creator를 수행한다. 애플리케이션 소스를 보자. App 컴포넌트는 가장 최상위 애플리케이션으로 Container 컴포넌트와 Presentational 컴포넌트를 사용해 화면 레이아웃을 만들고 있다.
import { ViewEncapsulation, Component } from 'angular2/core';
import { RangleBar } from './rangle-bar';
import { RangleButton } from './rangle-button';
import { RangleTextField } from './rangle-text-field';
@Component({
selector: 'app',
directives: [ RangleBar, RangleTextField, RangleButton ],
template: `
<rangle-bar name="Search the site">
<rangle-text-field placeholder="Enter Keyword"
[(value)]="searchTerm">
</rangle-text-field>
<rangle-button name="Search"
[isPrimary]="true"
(click)="handleSearch(searchTerm)">
</rangle-button>
</rangle-bar>
<rangle-bar name="Other Stuff">
<rangle-button name="Button 1"
[isPrimary]="true">
</rangle-button>
<rangle-button name="Button 2"></rangle-button>
<rangle-button name="Button 3"></rangle-button>
</rangle-bar>
<p> inside viewCapsulation </p>
`,
styles: [ 'p { background: red; border: dashed yellow 2px; }' ],
encapsulation: ViewEncapsulation.Native
})
export class App {
private searchTerm: string;
handleSearch(searchTerm: string): void {
alert(`You searched for '${searchTerm}'`);
}
}
GistRun의 소스와 Rangle.io 동영상을 참조하자.
- Container & Presentational Component 개발 방식에 대한 소개
- Component LifeCycle에 대한 소개: ng-content를 특별히 View Content라 하고, 그외 템플릿에 직접 설정된 컴포넌트를 View Child라 한다. Life Cycle에서는 둘의 시점이 나뉘어져 있다. View Content가 먼저 호출된다.
- ElementRef 주입받아 컴포넌트의 DOM을 사용할 수 있다.
<참조>
- Angular2 Component Basic (ppt, src)- Rangle.io
- Presentational and Container Component - Dan Abramov
'Angular > Concept' 카테고리의 다른 글
| [PlayNode 2016] 컨퍼런스 - RxJS (0) | 2016.11.23 |
|---|---|
| [Angular v2] 왜 배워야 하는가? (0) | 2016.10.23 |
| [ExtJS] ExtJS vs Angular2 (0) | 2016.04.16 |
| [ES2015] Depth in ES6 요약 (0) | 2016.04.08 |
| [Module System] Module Loader 와 Bundler에 대하여 - 2 (0) | 2016.02.19 |