brunch

You can make anything
by writing

C.S.Lewis

by eddward park Feb 21. 2021

State Pattern

행위 패턴중 상태 패턴에 대해서

피그마로 직접 그린 이미지
상태 패턴(state pattern)은 객체 지향 방식으로 상태 기계를 구현하는 행위 소프트웨어 디자인 패턴이다.


위키에 정의된 상태패턴이다.


여러분과 같이 필자도 무슨 말인지 알듯 말듯 하다.


개발관련 용어들의 정의를 글이나 말로 들어보면 전혀 이해되지 않는 경우가 많다.


이런것이 개발을 이해하기 어렵게 만드는 이유중 하나라고 생각한다.



피그마로 직접 그린 이미지


상태 패턴을 온라인 쇼핑몰에서 상품 구매하는 과정을 통해 살펴보자.  


온라인 쇼핑몰에서 내가 원하는 티셔츠를 장바구니에 담는다.

장바구니에 담긴 상품을 구매하기 버튼을 누른다.

상품 재고가 있으면 카드결제를 진행하고 재고가 없으면 구매 프로세스는 종료된다.

카드 정보를 입력하여 결제를 요청한다.

결제 정보가 맞고 잔고가 있으면 결제가 완료되고 그렇지 않으면 구매 프로세스는 종료된다.

결제가 완료되면 상품이 준비되고 배송을 통해 집으로 배달이 된다.


위의 과정에서 상태 패턴은 재고를 확인하는 과정과 카드 승인을 요청하는 과정에서 발생한 것을 알 수 있다.


각각의 과정에서 행위에 대한 결과가 참이면 다음단계를 진행하고 거짓이면 종료된다.



피그마로 직접 그린 이미지


https://github.com/fbeline/design-patterns-JS/blob/master/src/behavioral/state/state_es6.js


위의 이미지는 상태 패턴의 예제 코드이다.


주문 과정의 상태에 따라 WaitingForPayment, Shipping, Delivered의 과정이 진행되는 것을 볼 수 있다.


상태 패턴은 코드내의 조건문들을 대체하려는 목적으로 사용되는 것을 알 수 있다.


앞으로 온라인에서 상품을 주문할때 위의 사항들을 떠올리면 자연스럽게 상태패턴을 익히게 되는 거다.


매거진의 이전글 Decorator Patten
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari