[typescript] 추상 클래스를 활용한 상태 패턴 구현 예시

11 Dec 2023

typescript

이번에는 TypeScript를 사용하여 추상 클래스를 활용하여 상태 패턴(State Pattern)을 구현하는 예시에 대해 살펴보겠습니다. 상태 패턴은 객체의 상태에 따라 동작이 변화하도록 하는 디자인 패턴으로, 객체의 상태를 클래스로 분리하고 각 상태에 따른 동작을 캡슐화하여 관리하는 패턴입니다.

추상 클래스를 활용한 상태 패턴 구현

먼저, 상태 패턴을 구현하기 위해 다음과 같이 State라는 추상 클래스를 정의합니다.

abstract class State {
  abstract handle(): void;
}

그리고 이 클래스를 상속받아 각 상태에 대한 구체적인 클래스를 만들어줍니다.

class ConcreteStateA extends State {
  handle(): void {
    console.log('첫 번째 상태 처리');
  }
}

class ConcreteStateB extends State {
  handle(): void {
    console.log('두 번째 상태 처리');
  }
}

class ConcreteStateC extends State {
  handle(): void {
    console.log('세 번째 상태 처리');
  }
}

그 다음, 상태를 관리하는 컨텍스트 클래스인 Context를 정의합니다.

class Context {
  private state: State;

  constructor(state: State) {
    this.state = state;
  }

  setState(state: State) {
    this.state = state;
  }

  request() {
    this.state.handle();
  }
}

상태 패턴 사용 예시

이제 위에서 정의한 클래스들을 사용하여 상태 패턴을 구현해보겠습니다. 먼저, 각 상태 클래스와 컨텍스트를 생성합니다.

const stateA = new ConcreteStateA();
const stateB = new ConcreteStateB();
const stateC = new ConcreteStateC();
const context = new Context(stateA);

그리고 상태를 변경하고 요청을 수행하는 예시 코드를 작성합니다.

context.request(); // "첫 번째 상태 처리"
context.setState(stateB);
context.request(); // "두 번째 상태 처리"
context.setState(stateC);
context.request(); // "세 번째 상태 처리"

위의 예시 코드를 실행하면, 컨텍스트의 상태가 변경됨에 따라 다른 상태에 대한 처리가 수행되는 것을 확인할 수 있습니다.

결론

이와 같이 TypeScript를 사용하여 추상 클래스를 활용하여 상태 패턴을 구현할 수 있습니다. 이를 통해 객체의 상태에 따라 동작을 유연하게 관리할 수 있으며, 유지보수성 및 확장성을 높일 수 있습니다.

참고 자료

TypeScript 공식 문서
Head First Design Patterns by Eric Freeman and Elisabeth Robson. O’Reilly Media, 2004.