[Angular] 선언적 구조 개선

export default class SamplePage {
  datas = signal<SampleDto[]>([]);

  constructor(
    private readonly sampleService: SampleService,
    private readonly router: Router
  ) {
    this.getDatabase();
  }

  getDatabase() {
    this.sampleService
      .sampleControllerQueryDatabase()
      .subscribe((res) => {
        this.datas.set(res);
      });
  }
}

• 기존의 fetch 및 할당은 지나치게 선언적인 경향이 있음.
• 또한 매번 페이지가 렌덜이 될 때마다 Observable을 새로 생성해서 계속 쌓이게 됨.
• 이를 toSignal, BehaviorSubject, pipe, switchMap을 활용해 개선하는 패턴
  
  

import { Component, signal } from '@angular/core';
...
import { toSignal } from '@angular/core/rxjs-interop';
import { BehaviorSubject, switchMap } from 'rxjs';

@Component({
  selector: 'app-functional-doc',
  standalone: true,
  imports: [CommonModule, LepiButton, LepiIcon],
  templateUrl: './functional-doc.page.html',
  styleUrl: './functional-doc.page.scss',
})
export default class SamplePage {
  /**
   * BehaviorSubject
   *
   * Observable의 한 종류.
   * .subscribe 하자 마자 바로 parameter로 넣은 값을 emit 한다.
   */
  refresh$ = new BehaviorSubject<void>(undefined);

  datas = toSignal(
    this.refresh$.pipe(
      switchMap(() =>
        this.sampleService.sampleControllerQueryDatabase()
      )
    )
  );

  constructor(
    private readonly sampleService: SampleService,
    private readonly router: Router
  ) {}
}

• 선언적 프로세스 제거, 최소한의 Observable 생성