추상 팩토리 패턴 ( Abstract Factory Pattern )

• Abstract Facotry는 추상적인 것들을 미리 정해두고 만드는 공장의 의미함
• 먼저 만들어야할 컴포넌트들을 추상적으로 정하고 구체적인 조건이 주어지면 조건에 맞는 구체적인 컴포넌트들을 정해 생성하는 패턴
• 구체적인 컴포넌트들을 생성해 조립해서 하나의 시스템을 만드는 패턴

interface Button {

  render(): void;

  onClick(f: Function): void;

}

interface Checkbox {

  render(): void;

  toggle(): void;

}

interface GUIFactory {

  createButton(): Button;

  createCheckbox(button: Button): Checkbox;

}

class WindowsButton implements Button {

  public render(): void {

    console.log("Render a button in Windows Style");

  }

  public onClick(f: Function): void {

    console.log("Windows button was clicked");

    f();

  }

}

class WindowsCheckbox implements Checkbox {

  constructor(private button: Button) {}

  public render(): void {

    console.log("Render a checkbox in Windows Style");

  }

  toggle(): void {

    this.button.onClick(() => {

      console.log("Windows checkbox toggled");

    });

  }

}

class MacOSButton implements Button {

  public render(): void {

    console.log("Render a button in MacOS Style");

  }

  public onClick(f: Function): void {

    console.log("MacOS button was clicked");

    f();

  }

}

class MacOSCheckbox implements Checkbox {

  constructor(private button: Button) {}

  public render(): void {

    console.log("Render a checkbox in MacOS Style");

  }

  toggle(): void {

    this.button.onClick(() => {

      console.log("MacOS checkbox toggled");

    });

  }

}

class WindowsFactory implements GUIFactory {

  public createButton(): Button {

    return new WindowsButton();

  }

  public createCheckbox(button: Button): Checkbox {

    return new WindowsCheckbox(button);

  }

}

class MacOsFactory implements GUIFactory {

  public createButton(): Button {

    return new MacOSButton();

  }

  public createCheckbox(button: Button): Checkbox {

    return new MacOSCheckbox(button);

  }

}

// Client Code

function renderUI(factory: GUIFactory) {

  const button = factory.createButton();

  const checkbox = factory.createCheckbox(button);

  button.render();

  checkbox.render();

  button.onClick(() => {

    console.log("Button Clicked");

  });

  checkbox.toggle();

}

renderUI(new WindowsFactory());

renderUI(new MacOsFactory());

 

❤주의할 것은 추상 팩토리 패턴이 팩토리 메서드 패턴의 상위호환이 아니라는 것입니다.

 팩토리 패턴은 단일 객체의 생성을 추상화하고 분리하는 데 중점을 둔 반면, 추상 팩토리 패턴은 관련된 여러 객체의 생성을 추상화하고 관리하는 데 중점을 둡니다. 만약 여러 종류의 객체를 생성하고 이 객체들이 일관성을 유지해야 할 때 추상 팩토리 패턴이 유용하며, 단순히 객체 생성을 분리하고 단일 객체를 생성하는 경우 팩토리 패턴이 적합할 수 있습니다.