프런트엔드/디자인 패턴

[8일차] 상태 | 행동 패턴 11일만에 끝내기 챌린지 - GoF 디자인 패턴

조드래곤나인 2023. 7. 16. 15:09

 

출처: 에릭 감마 , 리처드 헬름 , 랄프 존슨 , 존 블리시디스. 『Gof의 디자인 패턴』. 김정아(역). 프로텍미디어, 2015.

 

 

[8일차] 상태(State)
행동 패턴 11일만에 끝내기 챌린지 - GoF 디자인 패턴

타입스크립트로 설명하는 GoF 디자인 패턴의 행동 패턴 11일만에 끝내기 챌린지

 

 

상태란?

객체의 내부 상태에 따라 스스로 행동을 변경할 수 있게끔 허가하는 패턴으로,
이렇게 하면 객체를 마치 자신의 클래스를 바꾸는 것 처럼 보인다.

 

 

활용성

1) 객체의 행동이 상태에 따라 달라질수 있고,
객체의 상태에 따라서 런타임에 행동이 바뀌어야 할 때

2) 어떤 연산에 그 객체의 상태에 따라 달라지는

다중 분기 조건 처리가 너무 많이 있을 때

 

 

구조 및 구현

interface State {
    handle(): void
}

class Context {
    private state: State

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

    changeState(state: State) {
        this.state = state
    }

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

class ConcreteStateA implements State {
    handle() {
        console.log('ConcreteStateA')
    }
}

class ConcreteStateB implements State {
    handle() {
        console.log('ConcreteStateB')
    }
}
 
class Main {
    constructor() {
        const stateA = new ConcreteStateA()
        const stateB = new ConcreteStateB()
        const context = new Context(stateA)
        
        context.request() // ConcreteStateA

        context.changeState(stateB)
        context.request() // ConcreteStateB
    }
}
 

 


 

 

공식 기술블로그 링크

더넥스트웹리서치랩

웹 클라이언트 기술을 전문적으로 연구하고 자료를 발행하는 기술 블로그를 운영합니다.

the-next-web-research-lab.github.io

 

728x90