[Design Pattern] 생성 패턴(Creational Patterns) 🏗️

생성 패턴(Creational Patterns) 톺아보기! 🏗️

앞서 살짝 맛봤던 디자인 패턴의 세계, 이제 본격적으로 하나씩 탐험해볼까요? 이번에는 생성 패턴(Creational Patterns)을 중심으로 객체를 어떻게 생성할지 고민하는 개발자의 이야기를 풀어보려고 합니다. 😎

---

🏗️ 생성 패턴: 객체 생성의 예술

생성 패턴은 말 그대로 객체를 생성하는 방법에 집중합니다. 단순히 new 키워드를 남발하는 대신, 객체 생성 과정을 체계적으로 관리하고 코드의 재사용성을 높이는 데 중점을 둡니다. “객체를 만들어야 하는데, 어떻게 하면 더 우아하게 만들 수 있을까?”라는 질문이 핵심이죠.

---

🌟 주요 생성 패턴들

1️⃣ 싱글턴 패턴(Singleton Pattern)

하나만 존재해야 한다면?

 

싱글턴 패턴은 애플리케이션에서 단 하나의 인스턴스만 존재해야 할 때 사용됩니다. 예를 들어, Redux Store처럼 전역적으로 상태를 관리하는 객체를 떠올려 보세요.

 

🚀 코드 예제: 싱글턴 패턴

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    this.state = "I am the only one!";
    Singleton.instance = this;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true
console.log(instance1.state); // "I am the only one!"

 

🤔 언제 쓰나요?

• Redux Store
• 전역 설정 관리 (예: 테마, 다크 모드 상태)

---

2️⃣ 팩토리 패턴(Factory Pattern)

 

다양한 타입의 객체를 만들어야 한다면?

 

팩토리 패턴은 객체 생성 로직을 캡슐화하여 특정 조건에 따라 다양한 타입의 객체를 생성할 때 유용합니다.

 

🚀 코드 예제: 팩토리 패턴

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class AnimalFactory {
  static createAnimal(type, name) {
    if (type === "dog") {
      return new Animal(`${name} the Dog`);
    } else if (type === "cat") {
      return new Animal(`${name} the Cat`);
    }
    return new Animal(name);
  }
}

const dog = AnimalFactory.createAnimal("dog", "Buddy");
const cat = AnimalFactory.createAnimal("cat", "Kitty");

console.log(dog.name); // "Buddy the Dog"
console.log(cat.name); // "Kitty the Cat"

 

🤔 언제 쓰나요?

• 다양한 UI 컴포넌트를 조건에 따라 생성할 때
• 복잡한 객체를 간단히 만들고 싶을 때

---

3️⃣ 빌더 패턴(Builder Pattern)

복잡한 객체를 점진적으로 만들어야 한다면?

 

빌더 패턴은 단계적으로 객체를 생성하는 데 도움을 줍니다. 특히, 옵션이 많아 생성자가 지나치게 복잡해지는 경우 유용하죠.

 

🚀 코드 예제: 빌더 패턴

class Burger {
  constructor() {
    this.ingredients = [];
  }
  addIngredient(ingredient) {
    this.ingredients.push(ingredient);
    return this; // 체이닝을 지원!
  }
  build() {
    return `Burger with: ${this.ingredients.join(", ")}`;
  }
}

const myBurger = new Burger()
  .addIngredient("Lettuce")
  .addIngredient("Tomato")
  .addIngredient("Cheese")
  .build();

console.log(myBurger); // "Burger with: Lettuce, Tomato, Cheese"

 

🤔 언제 쓰나요?

• 복잡한 구성 요소가 많은 객체 생성 (예: Form 데이터 빌드)
• 체이닝으로 객체 생성 로직을 가독성 있게 작성할 때

---

4️⃣ 프로토타입 패턴(Prototype Pattern)

객체를 복사해서 만들고 싶다면?

 

프로토타입 패턴은 기존 객체를 복제(clone)하여 새로운 객체를 생성합니다. 복잡한 객체를 다시 생성할 필요 없이 효율적으로 새로운 객체를 만들 수 있죠.

 

🚀 코드 예제: 프로토타입 패턴

const original = {
  name: "Prototype",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  },
};

const clone = Object.create(original);
clone.name = "Cloned Prototype";

original.greet(); // "Hello, I am Prototype"
clone.greet();    // "Hello, I am Cloned Prototype"

 

🤔 언제 쓰나요?

• 성능 최적화가 필요한 경우 (복잡한 객체를 직접 생성하지 않고 복제)
• 기본 템플릿 객체를 기반으로 변형된 객체 생성

---

🎯 프론트엔드 개발에서 생성 패턴의 활용

🛠️ React와 생성 패턴

• 싱글턴 패턴: Context API에서 전역 상태를 관리할 때 활용됩니다.
• 팩토리 패턴: 조건에 따라 다양한 UI 컴포넌트를 렌더링할 때 유용합니다.
• 빌더 패턴: Form 컴포넌트나 필터 빌더처럼 옵션이 많은 컴포넌트를 설계할 때 효과적입니다.

🛠️ Redux와 생성 패턴

• 싱글턴 패턴: Redux Store는 단 하나의 인스턴스만 존재합니다.
• 팩토리 패턴: 다양한 액션 타입을 생성하는 로직에 활용될 수 있습니다.

---

디자인 패턴의 생성 단계는 객체를 “왜” 만들고, “어떻게” 만들어야 하는지를 고민하게 만들어 줍니다. 다음 글에서는 구조 패턴(Structural Patterns)을 탐험하며, “객체들을 어떻게 연결하고 협력시킬 것인가?”에 대해 이야기해볼게요.

 

🌷전설의 개발자가 되어봅시당!🌷