[JavaScript 문법] 48일차: Angular 상태 관리

Angular의 상태 관리

Angular는 컴포넌트 기반 아키텍처를 사용하여 상태를 관리합니다. 각 컴포넌트는 자체 상태를 가지고 있으며, 부모-자식 관계를 통해 상태를 전달할 수 있습니다. 그러나 대규모 애플리케이션에서는 보다 체계적인 상태 관리가 필요하며, 이를 위해 NgRx와 같은 상태 관리 라이브러리를 사용할 수 있습니다.

NgRx 소개

NgRx는 Angular 애플리케이션의 상태 관리를 위한 Redux 기반 라이브러리입니다. NgRx는 애플리케이션의 상태를 일관성 있게 관리하고, 상태 변화의 흐름을 명확하게 합니다. NgRx의 주요 개념으로는 스토어(store), 액션(actions), 리듀서(reducers), 이펙트(effects), 셀렉터(selectors) 등이 있습니다.

NgRx 설치

NgRx를 사용하기 위해 필요한 패키지를 설치합니다.

ng add @ngrx/store
ng add @ngrx/effects
ng add @ngrx/store-devtools

스토어 설정

NgRx 스토어를 설정하여 애플리케이션의 상태를 중앙에서 관리합니다.

예제: 상태, 액션, 리듀서 정의

1. 상태(state) 정의

// state.ts
export interface AppState {
  count: number;
}

export const initialState: AppState = {
  count: 0
};

2. 액션(actions) 정의

// actions.ts
import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');

3. 리듀서(reducer) 정의

// reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './actions';
import { AppState, initialState } from './state';

const _counterReducer = createReducer(
  initialState,
  on(increment, state => ({ ...state, count: state.count + 1 })),
  on(decrement, state => ({ ...state, count: state.count - 1 }))
);

export function counterReducer(state: AppState | undefined, action: Action) {
  return _counterReducer(state, action);
}

Angular에서 NgRx 사용

Angular 애플리케이션에서 NgRx 스토어를 사용하기 위해 스토어 모듈을 설정하고, 컴포넌트에서 상태와 액션을 사용합니다.

예제: NgRx 스토어 설정

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { AppComponent } from './app.component';
import { counterReducer } from './reducer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count: counterReducer }),
    StoreDevtoolsModule.instrument({ maxAge: 25 })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

예제: 컴포넌트에서 NgRx 상태 사용

// counter.component.ts
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from './state';
import { increment, decrement } from './actions';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count$ | async }}</p>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
    </div>
  `
})
export class CounterComponent {
  count$ = this.store.select('count');

  constructor(private store: Store<AppState>) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular NgRx Counter</h1>
    <app-counter></app-counter>
  `
})
export class AppComponent {}

NgRx DevTools

NgRx DevTools는 상태와 액션을 시각적으로 디버깅할 수 있는 도구입니다. StoreDevtoolsModule을 추가하여 DevTools를 설정할 수 있습니다.

예제: NgRx DevTools 설정

// app.module.ts
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({ maxAge: 25 })
  ]
})

결론

NgRx는 Angular 애플리케이션의 상태를 중앙에서 관리할 수 있는 강력한 도구입니다. 이번 글에서는 NgRx의 기본 개념, 상태, 액션, 리듀서, 스토어 설정, Angular에서 NgRx 사용, NgRx DevTools 설정에 대해 배웠습니다. 다음 글에서는 라우팅 설정에 대해 알아보겠습니다.

다음 글에서 만나요!