BehaviorSubject를 활용한 View 상태 관리

상태 관리의 필요성 및 Angular와 상태 관리의 관계

Angular는 컴포넌트 기반의 프레임워크로, 컴포넌트 간 데이터와 상태를 주고받는 일이 자주 발생합니다.
작은 규모의 프로젝트에서는 Input/Output 데코레이터나 간단한 서비스를 이용한 상태 공유로 충분하지만, 프로젝트 규모가 커지면 상태를 한곳에서 관리해야 하는 필요성이 생깁니다.

BehaviorSubject는 Angular의 상태 관리를 간단하고 효과적으로 구현하는 데 적합한 도구입니다.

특히 Angular의 변경 감지 시스템과 자연스럽게 통합되기 때문에 UI 업데이트가 간편합니다.

---

BehaviorSubject를 사용하는 이유

BehaviorSubject는 RxJS 라이브러리에서 제공하는 특수한 Observable입니다.

상태 관리에 BehaviorSubject를 사용하는 주요 이유는 다음과 같습니다

1. 초기값 설정
   • BehaviorSubject는 생성 시 초기값을 설정할 수 있습니다.
   • 이 초기값은 구독자가 없더라도 상태를 명확하게 정의할 수 있게 합니다.
2. 최신 상태 값 유지
   • 항상 가장 최신의 상태 값을 보유하고 있으며, 구독자가 새로 구독할 때 최신 값을 즉시 전달합니다.
3. Angular와의 궁합
   • Angular의 변경 감지 시스템과 잘 작동하며, 상태 변화에 따라 UI를 자동으로 업데이트할 수 있습니다.

---

BehaviorSubject와 Observable의 기본 개념

Observable

Observable은 데이터 스트림을 나타냅니다. 주로 비동기 작업을 처리하거나 이벤트 흐름을 관리하는 데 사용되며, 구독자가 데이터를 받을 수 있습니다. 하지만 현재 상태를 유지하지 않고, 구독이 이루어진 시점 이후의 데이터만 전달됩니다.

BehaviorSubject의 특징

• 초기값이 필수
  BehaviorSubject는 초기값을 설정해야 하며, 이는 구독자가 없는 상태에서도 항상 유지됩니다.
• 가장 최신 값 전달
  기존 구독자는 상태 값이 변경될 때마다 최신 값을 받고, 새로 구독하는 구독자는 초기값 또는 최신 값을 즉시 받습니다.

---

BehaviorSubject로 View 상태 관리하기

예제: viewType 관리

이 예제에서는 viewType이라는 상태를 관리하여 사용자가 리스트 보기와 그리드 보기를 전환할 수 있도록 구현합니다.

1) 서비스에서 BehaviorSubject 정의

먼저, View 상태를 관리하기 위해 BehaviorSubject를 Angular 서비스에 정의합니다.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ViewStateService {
  private viewTypeSubject = new BehaviorSubject<string>('list'); // 초기값 설정
  viewType$ = this.viewTypeSubject.asObservable(); // 외부에서 읽기만 가능

  setViewType(type: string): void {
    this.viewTypeSubject.next(type); // 상태 업데이트
  }
}

 

2) 컴포넌트에서 상태 관리 적용

컴포넌트에서 ViewStateService를 구독하고, 상태 값에 따라 UI를 업데이트합니다.

import { Component } from '@angular/core';
import { ViewStateService } from './view-state.service';

@Component({
  selector: 'app-view-manager',
  template: `
    <div>
      <button (click)="setView('list')">List View</button>
      <button (click)="setView('grid')">Grid View</button>
    </div>
    <div *ngIf="viewType === 'list'">
      <!-- 리스트 보기 UI -->
      <p>List View Content</p>
    </div>
    <div *ngIf="viewType === 'grid'">
      <!-- 그리드 보기 UI -->
      <p>Grid View Content</p>
    </div>
  `,
})
export class ViewManagerComponent {
  viewType: string;

  constructor(private viewStateService: ViewStateService) {
    // 구독하여 상태 값을 가져옴
    this.viewStateService.viewType$.subscribe((type) => {
      this.viewType = type;
    });
  }

  setView(type: string): void {
    this.viewStateService.setViewType(type); // 상태 변경
  }
}

 

BehaviorSubject를 활용하면 Angular 애플리케이션에서 상태를 명확하고 간단하게 관리할 수 있습니다.

• 초기값을 설정하고 최신 상태를 유지하는 특성 덕분에 UI와 상태 간의 동기화가 쉽습니다.
• 소규모 프로젝트에서는 간단한 상태 관리로 충분하지만, 필요하다면 이를 기반으로 더 복잡한 상태 관리 시스템(NgRx 등)으로 확장할 수 있습니다.