Angular 구성 요소를 더 세분화하는 요령

사물을 처리하는 일반적인 Angular 방식은 비즈니스 로직을 서비스에 배치하고 프레젠테이션 로직을 구성 요소에 배치하는 것입니다. 모든 어려운 작업을 다른 구성 요소에서 가져오고 재사용하는 서비스에 위임하므로 좋은 접근 방식입니다. 그러나 때때로 구성 요소는 구성 요소 수준에서 데이터 처리와 관련된 개인 메서드를 개발하면서 자체 논리를 얻기 시작합니다.

개인 메서드와 상태는 더러운 해킹이 수행되지 않는 한 테스트할 수 없기 때문에 단위 테스트에서 때때로 문제가 됩니다. 게다가 구성 요소를 단위 테스트하려면 선언할 모듈과 모든 종속 모듈을 마운트해야 하므로 단위 테스트를 실행하는 데 필요한 시간이 늘어납니다.

이 기사에서는 Angular 구성 요소를 여러 부분으로 나누는 방법을 공유하여 단위 테스트에서 더 쉽게 만들고 더 유연하게 만들 수 있도록 합니다.

간단한 카운터 구성 요소를 살펴보겠습니다.

@Component({
  template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
  selector: 'app-root',
})
export class AppComponent {
  protected _calledTimes = 0;

  public get calledTimes(): number {
    return this._calledTimes;
  }

  public increment(): void {
    this._calledTimes++;
  }
}

매우 간단합니다. 버튼을 클릭하면 카운터가 1씩 증가합니다. 그것을 더 조각으로 나누는 방법이 있습니까? AppComponent를 클래스 App로 생각하고 Component로 장식하여 App를 확장하는 새 클래스를 만듭니다. 따라서 클래스를 추출하고 이름을 Counter로 지정합니다.

export class Counter {
    protected _calledTimes = 0;

    public get calledTimes(): number {
        return this._calledTimes;
    }

    public increment(): void {
        this._calledTimes++;
    }
}

@Component({
    template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
    selector: 'app-root',
})
export class AppComponent extends Counter { }

그것은 우리에게 어떤 이점을 가져다 줍니까? 글쎄, 우리는 Angular에 구속되지 않는 완벽하게 불가지론적인 클래스를 만들었으므로 ngModules를 마운트하지 않고도 단위 테스트를 수행할 수 있습니다. 그리고 단순한 클래스이기 때문에 자유롭게 확장하고 꾸밀 수 있습니다. 이를 기반으로 새 구성 요소를 만들거나 서비스로 확장할 수 있습니다.

1이 아닌 100씩 증분하여 동일한 계산을 수행하는 새 구성 요소를 원하면 어떻게 할까요? 음, 카운터를 확장하고 증분 방법을 재정의하면 상당히 쉽습니다.

@Component({
  template: `<p>{{ calledTimes }}</p>
    <p><button (click)="increment()">increment</button></p>`,
  selector: 'app-increment-by-100',
})
export class IncrementBy100Component extends Counter {
  public override increment(): void {
    this._calledTimes += 100;
  }
}

따라서 *Component 파생 클래스의 주요 아이디어는 자체 상태가 없는 상태에서 클래스를 템플릿에 붙이는 것입니다. 상태 저장 및 상태 비저장 구성 요소의 콤보와 같습니다.