brunch

You can make anything
by writing

C.S.Lewis

by eddward park Feb 14. 2021

Decorator Patten

구조패턴중 데코레이터 패턴에 대해서

피그마로 직접 그린 이미지


데코레이터 패턴(Decorator pattern)이란 주어진 상황 및 용도에 따라 어떤 객체에 책임을 덧붙이는 패턴으로, 기능 확장이 필요할 때 서브클래싱 대신 쓸 수 있는 유연한 대안이 될 수 있다.


위키에 정의된 데코레이터 패턴이다.


정의된 내용중 '덧붙이는'의 단어가 데코레이터 패턴의 핵심이다.


우리가 일상생활에서 자주 마시게 되는 커피를 통해 시각화를 하여 보자


피그마로 직접 그린 이미지


친구인 철수, 영희와 함께 커피숍에서 주문하는 상황을 떠올려 보자.


나는 아메리카노를 주문한다.

영희는 카푸치노를 주문한다.

철수는 카페모카를 주문한다.

커피숍 점원은 세잔의 에스프레소를 추출한다.

첫번째 컵에 에스프레소 한잔과 뜨거운 물을 넣어 아메리카를 만든다.

두번째 컵에 에스프레소 한잔, 뜨거운 우유 그리고 우유거품을 넣어 카푸치노를 만든다.

세번째 컵에 에스프레소 한잔, 초콜릿 시럽, 뜨거운 우유 그리고 휘핑크림을 넣어 카페 모카를 만든다.


커피숍 점원이 세가지의 커피를 만드는 과정에서 에스프레소를 베이스로 하여 각각 다른 재료들을 추가하여 우리가 주문한 각각의 커피를 만든다.


데코레이터의 역할은 객체에 추가적인 기능을 붙이는 것이다.



피그마로 직접 그린 이미지


https://github.com/fbeline/design-patterns-JS/blob/master/src/structural/decorator/decorator_es6.js


위의 이미지는 데코레이터 예제 코드이다.


기본이 되는 파스타가 있고 각각 다른 재료를 추가하여 다양한 파스타를 만들고 그에 따른 가격이 틀려지는것을 볼 수 있다.


앞으로 커피숍을 가서 커피를 주문할때 위의 사항들을 떠올린다면 자연스럽게 객체지향의 Decorator Pattern을 익히게 되는 거다.


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