[디자인 패턴] 플라이웨이트 패턴_ Flyweight pattern (JavaScript)

플라이웨이트 패턴(Flyweight Pattern) 이란?

플라이웨이트 패턴은 재사용 가능한 객체 인스턴스를 공유해 메모리 사용량을 최소화하는 구조적 디자인 패턴입니다. 대규모의 유사 객체를 다뤄야 할 때 특히 유용합니다.

 

+ 이름은 거창해 보였으나, 간단한 개념으로 재사용성을 늘려 성능을 최적화하는 패턴을 의미합니다.

---

기본 개념

• Flyweight (경량 객체):
  • 재사용 가능한 객체를 정의하는 인터페이스입니다.
  • ConcreteFlyweight: 공유 가능한 고정 상태(intrinsic state)를 포함.
  • UnsharedConcreteFlyweight: 개별 객체가 가지는 비공유 상태(extrinsic state)를 포함.
• FlyweightFactory (팩토리):
  • 경량 객체를 생성 및 관리하며, 기존 객체를 캐싱해 재사용 여부를 판단합니다.

 

intrinsic vs extrinsic

여기서 이 두가지 개념을 짚어보면 아래와 같습니다.

속성	intrinsic (내재 상태)	extrinsic (외재 상태)
특징	고정된 값, 장소나 상황에 의존하지 않음	변경 가능, 장소나 상황에 따라 달라짐
예시	글꼴, 색상, 크기	텍스트 내용, 위치

---

예시 코드

1. 경량 객체 정의

class TextStyle {
  constructor(fontFamily, fontSize, color) {
    this.fontFamily = fontFamily; // intrinsic
    this.fontSize = fontSize;     // intrinsic
    this.color = color;           // intrinsic
  }
}

 

2. Flyweight 팩토리

팩토리는 이미 존재하는 TextStyle 객체를 캐싱해 재사용하거나, 없으면 새로 생성합니다.

class TextStyleFactory {
  constructor() {
    this.styles = {}; // 캐싱된 스타일 저장
  }

  getStyle(fontFamily, fontSize, color) {
    const key = `${fontFamily}-${fontSize}-${color}`;
    if (!this.styles[key]) {
      this.styles[key] = new TextStyle(fontFamily, fontSize, color);
    }
    return this.styles[key];
  }
}

 

3. Flyweight를 사용하는 텍스트 객체

Text는 외재 상태(extrinsic state, ex: 텍스트 내용)를 포함합니다.

class Text {
  constructor(content, style) {
    this.content = content; // extrinsic
    this.style = style;     // intrinsic
  }

  display() {
    console.log(`Content: "${this.content}", Font: ${this.style.fontFamily}, Size: ${this.style.fontSize}, Color: ${this.style.color}`);
  }
}

 

const textStyleFactory = new TextStyleFactory();

// 텍스트 스타일 생성 및 공유
const style1 = textStyleFactory.getStyle('Arial', '12px', 'black');
const style2 = textStyleFactory.getStyle('Arial', '12px', 'black'); // 공유
const style3 = textStyleFactory.getStyle('Times New Roman', '14px', 'blue');

// 텍스트 객체 생성
const text1 = new Text('Hello, world!', style1);
const text2 = new Text('Flyweight Pattern', style2); // style1과 동일
const text3 = new Text('Design Patterns', style3);

// 텍스트 출력
text1.display();
text2.display();
text3.display();

---

실행 결과

style1과 style2는 동일한 객체로 공유됩니다.

Content: "Hello, world!", Font: Arial, Size: 12px, Color: black
Content: "Flyweight Pattern", Font: Arial, Size: 12px, Color: black
Content: "Design Patterns", Font: Times New Roman, Size: 14px, Color: blue

 

---

장단점

장점

1. 메모리 절약
   • 중복 객체 생성을 피하고, 공통 상태를 공유해 메모리 사용량을 줄입니다.
2. 성능 개선
   • 대규모 객체 생성 시 초기화 비용 절감.

단점

1. 코드 복잡성 증가
   • 객체 분리와 팩토리 관리로 인해 코드가 복잡해질 수 있습니다.
2. 설계 제한
   • intrinsic과 extrinsic 상태를 명확히 구분해야 하므로, 설계 시 추가적인 고려가 필요합니다.

---

활용 사례

1. 그래픽 애플리케이션
   • 같은 모양의 도형, 아이콘, 글꼴 등을 공유.
2. 문서 편집기
   • 텍스트 스타일(글꼴, 크기, 색상)을 공유.
3. 게임
   • 배경의 반복되는 오브젝트(예: 나무, 바위)를 공유.

---

📌 핵심 요약

플라이웨이트 패턴은 대규모의 반복 객체를 다룰 때 효율적입니다. 설계가 복잡할 수 있지만, 잘 활용하면 성능과 메모리 최적화 측면에서 큰 이점을 제공합니다. ✨