[angular] 리액티브 프로그래밍 구성

26 Dec 2023

angular

Angular는 리액티브 프로그래밍을 적극적으로 지지하며, Observables를 활용하여 비동기적인 데이터 스트림을 처리합니다. 이를 통해 사용자 인터페이스와 상태를 효율적으로 관리할 수 있습니다.

RxJS를 사용한 리액티브 프로그래밍

Angular에서 리액티브한 프로그래밍을 구성하는 핵심은 RxJS(Reactive Extensions for JavaScript)입니다. RxJS는 Observables과 우아한 방식으로 비동기 데이터 스트림을 다룰 수 있는 다양한 연산자들을 제공합니다.

예를 들어, HTTP 요청의 응답을 처리하거나 사용자와의 상호작용을 관리하는 경우, Observables와 RxJS를 통해 간결하고 효율적인 코드를 작성할 수 있습니다.

Angular에서의 리액티브 프로그래밍

Angular에서 리액티브 프로그래밍을 구성하기 위해 다음과 같은 핵심 요소들을 활용합니다.

Forms 모듈

Angular에서 Form 모듈은 사용자 입력을 처리하는 데 유용한 RxJS의 연산자와 함께 사용됩니다. 폼 입력값의 변경을 Observables로 다루고, 이를 통해 자동으로 폼의 유효성을 검증하거나 비동기적으로 서버에 데이터를 전송할 수 있습니다.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-search',
  template: `
  <input type="text" [formControl]="searchInput">
  `
})
export class SearchComponent {
  searchInput = new FormControl('');

  constructor() {
    this.searchInput.valueChanges
      .pipe(
        debounceTime(300),
        distinctUntilChanged(),
        switchMap(term => this.searchService.search(term))
      )
      .subscribe(results => {
        // Process the search results
      });
  }
}

HTTP 클라이언트

Angular의 HttpClient를 사용하면 HTTP 요청 및 응답을 Observables로 처리할 수 있습니다. 이를 통해 비동기 데이터 흐름을 효과적으로 관리하고, HTTP 요청에 대한 에러 처리나 중단 등을 용이하게 처리할 수 있습니다.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user',
  template: `
  <div>{{user$ | async}}</div>
  `
})
export class UserComponent {
  user$ = this.http.get<User>('/api/user');
  
  constructor(private http: HttpClient) {}
}

Router

Angular 라우터는 URL 변경과 관련된 이벤트를 Observables로 다룰 수 있습니다. 이를 통해 라우팅 이벤트에 따라 다양한 작업을 수행할 수 있으며, 사용자와의 상호작용에 따라 동적으로 컴포넌트를 렌더링할 수 있습니다.

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-profile',
  template: `
  <div *ngIf="user$ | async as user">
    <!-- Display user profile -->
  </div>
  `
})
export class UserProfileComponent {
  user$ = this.route.paramMap.pipe(
    switchMap(params => this.userService.getUser(params.get('id')))
  );

  constructor(private route: ActivatedRoute, private userService: UserService) {}
}

결론

Angular에서 리액티브 프로그래밍을 구성하기 위해서는 Observables과 RxJS를 적극 활용하여 비동기적인 데이터 처리와 상태 관리를 우아하게 다룰 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 유지보수가 쉬운 코드를 작성할 수 있습니다.

참고문헌: