Factory Method 패턴

보통 객체를 만들때 이런 방식으로 객체가 만들어짐

const btn = new PrimaryButton();

 

위와같은 객체가 늘어나면, 단점이 여러가지가 생김

• 객체 종류가 늘어나면 new 가 많아져서 코드 유지보수가 어려움
• 클라이언트 코드와 구체 클래스가 강하게 결합되어 확장성이 떨어짐
• API, 버튼 등이 늘어나면 코드가 지저분해짐

Factory Method는 객체 생성 로직을 한군데 모아두고, 확장성 있게, 수정에 닫혀있게 만드는게 핵심

 

프론트에선

• 컴포넌트 생성
• API 클라이언트

백엔드에선

• DB 연결 객체
• 결제 모듈(카드, 카카오)

등에서 사용된다.

---

구현방식

 

1. 인터페이스 정의

// 인터페이스 정의
interface Button {
  render(): void;
}

 

2. 구체화 클래스들

// 구체화 클래스들
class PrimaryButton implements Button {
  render() { console.log("Primary Button"); }
}

class DangerButton implements Button {
  render() { console.log("Danger Button"); }
}

 

3. Factory Method

// Factory Method
class ButtonFactory {
  static create(type: "primary" | "danger"): Button {
    if (type === "primary") return new PrimaryButton();
    if (type === "danger") return new DangerButton();
    throw new Error("Unknown button type");
  }
}

 

4. 클라이언트 코드에서 사용

// 클라이언트 코드에서 사용
const btn1 = ButtonFactory.create("primary");
btn1.render(); // "Primary Button"

const btn2 = ButtonFactory.create("danger");
btn2.render(); // "Danger Button"

 

해당 디자인 패턴은 확장성에 가장 포커스를 둔 코드이므로 확장 시킬때 편리함 + 가독성을 확인하기 위해 SuccessButton을 추가해보자

 

class PrimaryButton implements Button {
  render() { console.log("Primary Button"); }
}

class DangerButton implements Button {
  render() { console.log("Danger Button"); }
}

// 추가
class SuccessButton implements Button {
  render() { console.log("Success Button"); }
}

 

// Success button 추가
class ButtonFactory {
  static create(type: "primary" | "danger" | "success"): Button {
    if (type === "primary") return new PrimaryButton();
    if (type === "danger") return new DangerButton();
    if (type === "success") return new SuccessButton();
    throw new Error("Unknown button type");
  }
}