5. ● 명세specification
를 가진 재사용할 수 있는reusable
소프트웨어 구성요소 (위키피디아)
● 웹 애플리케이션의 기본 구성요소로 HTML 요소들을 포함
● 독립된 구성요소로 뷰와 로직으로 구성됨
● 컴포넌트들은 단방향 트리형태로 구성되고 최상위 루트 컴포넌트가 존재
Public API
사진 출처: https://v1.vuejs.org/guide/overview.html
컴포넌트 개요
6. Angular의 Hello World 컴포넌트
import { Component } from '@angular/core' ;
@Component({
selector: 'my-hello-world' ,
template: '<h1>{{title}}</h1>' ,
styles: ['h1 { color: red }' ]
})
export class HelloWorldComponent {
title = 'Hello World!!' ;
}
42. Setup
● npm install @ngrx/store --save후 StoreModule 모듈 임포트
import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';
@NgModule({
imports: [
BrowserModule,
StoreModule.forRoot({ counter: counterReducer }) // ActionReducerMap 전달
]
})
export class AppModule {}
43. Reducer (counter.reducer.ts)
import { Action } from'@ngrx/store';
import * as CounterActions from './coutner.actions';
export function counterReducer(state: number = 0, action: CounterActions.All): number {
switch(action.type) {
case CounterActions.INCREMENT:
return state + 1;
case CounterActions.DECREMENT:
return state - 1;
case CounterActions.RESET:
return action.payload
default:
return state;
}
}
44. Action (counter.actions.ts)
import { Action } from '@ngrx/store';
export const INCREMENT = '[Counter] Increment';
export const DECREMENT = '[Counter] Decrement';
export const RESET = '[Counter] Reset';
export class Increment implements Action {
readonly type = INCREMENT;
}
export class Decrement implements Action {
readonly type = DECREMENT;
}
export class Reset implements Action {
readonly type = RESET;
constructor(public payload: number) {}
}
export type All = Increment | Decrement | Reset;