[Design Pattern] 생성 패턴 정리(with JavaScript)

생성 패턴(Creational Pattern)

생성 패턴은 객체 생성의 복잡성을 감추고, 객체 생성 과정을 유연하고 효율적으로 관리하는 데 중요한 역할을 합니다. 이는 코드의 가독성과 유지보수성을 높이고, 시스템의 확장성을 개선하며, 객체 생성과 관련된 문제를 해결하는 데 도움을 줍니다.

---

OOP(객체 지향 프로그래밍)에서 생성 패턴(Creational Pattern)이 중요한 이유

1. 객체 생성의 복잡성 관리

• 객체 생성 로직 분리: 생성 패턴을 사용하면 객체 생성 로직을 별도의 클래스나 메서드로 분리할 수 있어 코드의 가독성과 유지보수성이 향상됩니다.
• 복잡한 객체 생성: 복잡한 객체를 생성할 때 생성 과정의 단계를 관리하고, 필요한 경우 유연하게 조정할 수 있습니다.

2. 코드의 유연성과 재사용성 향상

• 유연한 객체 생성: 생성 패턴을 사용하면 객체 생성 방식을 유연하게 변경할 수 있습니다. 예를 들어, 팩토리 메서드를 사용하면 객체 생성 방식을 쉽게 변경할 수 있습니다.
• 코드 재사용성: 객체 생성 로직을 재사용할 수 있어 코드 중복을 줄이고, 유지보수가 쉬워집니다.

3. 시스템의 확장성 및 유지보수성 개선

• 확장성: 새로운 객체 타입이 추가될 때 기존 코드에 최소한의 변경만으로도 확장이 가능합니다. 예를 들어, 추상 팩토리를 사용하면 새로운 제품군이 추가될 때 기존 팩토리를 변경할 필요 없이 새로운 팩토리만 추가하면 됩니다.
• 유지보수성: 객체 생성 로직이 중앙에서 관리되기 때문에, 객체 생성에 변경이 필요할 때 이를 쉽게 수정할 수 있습니다.

4. 객체 생성 제어

• 제어된 인스턴스 생성: 싱글톤 패턴을 사용하면 특정 클래스의 인스턴스를 하나만 생성하도록 제어할 수 있습니다. 이는 전역 상태 관리나 리소스를 절약하는 데 유용합니다.
• 객체 초기화 제어: 생성 패턴을 사용하면 객체 초기화를 더 세밀하게 제어할 수 있습니다. 빌더 패턴을 사용하면 단계별로 객체를 초기화할 수 있습니다.

5. 객체 간의 의존성 줄이기

• 의존성 감소: 생성 패턴을 사용하면 클라이언트 코드가 구체적인 클래스에 의존하지 않도록 할 수 있습니다. 이는 코드의 결합도를 낮추고, 더 유연한 설계를 가능하게 합니다.
• 인터페이스 기반 설계: 생성 패턴을 사용하면 인터페이스를 통해 객체를 생성할 수 있어, 클라이언트 코드가 구체적인 구현 클래스에 의존하지 않고, 인터페이스에 의존하도록 유도할 수 있습니다.

---

생성 패턴 종류

1. Factory Method (팩토리 메서드)

정의: 객체 생성의 인터페이스를 정의하지만, 어떤 클래스의 인스턴스를 생성할지는 서브클래스가 결정하게 합니다.

 

특징:

• 객체 생성 코드를 중앙에서 관리합니다.
• 생성 로직을 별도의 클래스나 메서드로 분리하여 코드의 가독성과 유지보수성을 향상시킵니다.

사용 시기:

• 클래스의 인스턴스를 생성하는 코드가 반복적으로 발생할 때.
• 구체적인 클래스에 의존하지 않고, 객체 생성 방식을 유연하게 변경하고자 할 때.
• 객체의 생성 과정에서 추가적인 논리가 필요할 때.

적절한 예시:

• 동적인 UI 컴포넌트를 생성할 때.
• 조건에 따라 다른 종류의 객체를 생성해야 할 때 (예: 사용자 역할에 따라 다른 버튼 생성).

예시:

import React from 'react';

// Product 인터페이스 정의
interface ButtonProps {
  label: string;
  onClick: () => void;
}

// Concrete Product 구현
const PrimaryButton: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button style={{ backgroundColor: 'blue', color: 'white' }} onClick={onClick}>
    {label}
  </button>
);

const SecondaryButton: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button style={{ backgroundColor: 'gray', color: 'black' }} onClick={onClick}>
    {label}
  </button>
);

// Factory Method 구현
const createButton = (type: 'primary' | 'secondary'): React.FC<ButtonProps> => {
  switch (type) {
    case 'primary':
      return PrimaryButton;
    case 'secondary':
      return SecondaryButton;
    default:
      throw new Error('Unsupported button type');
  }
};

// 사용 예시
const App: React.FC = () => {
  const PrimaryBtn = createButton('primary');
  const SecondaryBtn = createButton('secondary');

  return (
    <div>
      <PrimaryBtn label="Primary Button" onClick={() => alert('Primary Button clicked')} />
      <SecondaryBtn label="Secondary Button" onClick={() => alert('Secondary Button clicked')} />
    </div>
  );
};

export default App;

2. Abstract Factory (추상 팩토리)

정의: 관련 객체들의 집합을 생성할 수 있는 인터페이스를 제공하며, 구체적인 클래스는 지정하지 않습니다.

 

특징:

• 서로 관련된 여러 객체를 생성해야 할 때 유용합니다.
• 구체적인 클래스에 의존하지 않고, 인터페이스에 의존하도록 설계합니다.

사용 시기:

• 관련된 객체들의 집합을 생성해야 할 때.
• 구체적인 클래스에 의존하지 않고, 객체 생성 방식을 유연하게 변경하고자 할 때.
• 다양한 테마나 스타일을 적용해야 할 때.

적절한 예시:

• 다크 모드와 라이트 모드와 같은 테마에 따라 다른 UI 컴포넌트를 생성할 때.
• 데이터베이스 연결이나 설정이 여러 환경에 따라 다를 때.

예시:

import React from 'react';

// Abstract Factory 인터페이스 정의
interface UIFactory {
  createButton: () => React.FC<ButtonProps>;
  createInput: () => React.FC<InputProps>;
}

// Product 인터페이스 정의
interface ButtonProps {
  label: string;
  onClick: () => void;
}

interface InputProps {
  placeholder: string;
}

// Concrete Product 구현
const DarkButton: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button style={{ backgroundColor: 'black', color: 'white' }} onClick={onClick}>
    {label}
  </button>
);

const LightButton: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button style={{ backgroundColor: 'white', color: 'black' }} onClick={onClick}>
    {label}
  </button>
);

const DarkInput: React.FC<InputProps> = ({ placeholder }) => (
  <input style={{ backgroundColor: 'black', color: 'white' }} placeholder={placeholder} />
);

const LightInput: React.FC<InputProps> = ({ placeholder }) => (
  <input style={{ backgroundColor: 'white', color: 'black' }} placeholder={placeholder} />
);

// Concrete Factory 구현
class DarkUIFactory implements UIFactory {
  createButton() {
    return DarkButton;
  }

  createInput() {
    return DarkInput;
  }
}

class LightUIFactory implements UIFactory {
  createButton() {
    return LightButton;
  }

  createInput() {
    return LightInput;
  }
}

// 사용 예시
const App: React.FC = () => {
  const [factory, setFactory] = React.useState<UIFactory>(new DarkUIFactory());

  const Button = factory.createButton();
  const Input = factory.createInput();

  return (
    <div>
      <Button label="Button" onClick={() => alert('Button clicked')} />
      <Input placeholder="Enter text" />
      <button onClick={() => setFactory(new DarkUIFactory())}>Dark Theme</button>
      <button onClick={() => setFactory(new LightUIFactory())}>Light Theme</button>
    </div>
  );
};

export default App;

3. Builder (빌더)

정의: 복잡한 객체의 생성 과정을 단계별로 나누어 생성합니다.

 

특징:

• 객체 생성 과정을 단계별로 나누어 가독성을 높입니다.
• 동일한 생성 과정으로 다양한 표현을 만듭니다.

사용 시기:

• 복잡한 객체를 단계별로 생성해야 할 때.
• 생성 과정에서 다양한 옵션을 제공해야 할 때.
• 동일한 생성 과정을 통해 다양한 표현을 만들고자 할 때.

적절한 예시:

• 복잡한 폼 컴포넌트를 단계별로 생성할 때.
• 여러 단계를 거쳐 구성 요소를 추가하거나 설정해야 하는 경우 (예: 보고서 생성기).

예시:

import React from 'react';

// Product 인터페이스 정의
interface Form {
  fields: string[];
}

// Builder 인터페이스 정의
interface FormBuilder {
  addField: (field: string) => FormBuilder;
  build: () => Form;
}

// Concrete Builder 구현
class SimpleFormBuilder implements FormBuilder {
  private form: Form = { fields: [] };

  addField(field: string): FormBuilder {
    this.form.fields.push(field);
    return this;
  }

  build(): Form {
    return this.form;
  }
}

// 사용 예시
const App: React.FC = () => {
  const formBuilder = new SimpleFormBuilder();
  const form = formBuilder
    .addField('Name')
    .addField('Email')
    .addField('Password')
    .build();

  return (
    <div>
      <h1>Form Fields</h1>
      <ul>
        {form.fields.map((field, index) => (
          <li key={index}>{field}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

4. Prototype (프로토타입)

정의: 새로운 객체를 생성하는 대신 기존 객체를 복사하여 사용합니다.

 

특징:

• 객체 복사를 통해 성능을 최적화합니다.
• 객체 초기화 비용을 줄일 수 있습니다.

사용 시기:

• 새로운 객체를 생성하는 비용이 클 때.
• 객체를 초기화하는 비용을 줄이고자 할 때.
• 동일한 객체를 여러 번 생성해야 할 때.

적절한 예시:

• 동일한 초기 상태를 가진 객체를 여러 번 생성해야 할 때 (예: 게임에서 동일한 캐릭터를 복사).
• 복잡한 초기 설정이 필요한 객체를 복사하여 사용하는 경우.

예시:

import React from 'react';

// Product 인터페이스 정의
interface Shape {
  clone: () => Shape;
  draw: () => void;
}

// Concrete Prototype 구현
class Circle implements Shape {
  constructor(private radius: number) {}

  clone(): Shape {
    return new Circle(this.radius);
  }

  draw() {
    console.log(`Circle with radius ${this.radius}`);
  }
}

class Square implements Shape {
  constructor(private sideLength: number) {}

  clone(): Shape {
    return new Square(this.sideLength);
  }

  draw() {
    console.log(`Square with side length ${this.sideLength}`);
  }
}

// 사용 예시
const App: React.FC = () => {
  const shapes: Shape[] = [];

  const circle = new Circle(5);
  shapes.push(circle);
  shapes.push(circle.clone());

  const square = new Square(10);
  shapes.push(square);
  shapes.push(square.clone());

  return (
    <div>
      <h1>Shapes</h1>
      {shapes.map((shape, index) => (
        <div key={index}>{shape.draw()}</div>
      ))}
    </div>
  );
};

export default App;

5. Singleton (싱글톤)

정의: 클래스의 인스턴스가 오직 하나만 생성되도록 제한합니다.

 

특징:

• 전역 상태 관리에 유용합니다.
• 인스턴스가 하나임을 보장하여 리소스를 절약합니다.

사용 시기:

• 클래스의 인스턴스가 하나만 존재해야 할 때.
• 전역 상태를 관리해야 할 때.
• 리소스를 공유하거나 하나의 설정을 여러 곳에서 사용해야 할 때.

적절한 예시:

• 전역 상태 관리 (예: 상태 관리 라이브러리의 단일 스토어).
• 로깅, 설정 파일, 데이터베이스 연결 등 공통된 리소스를 하나의 인스턴스로 관리.

예시:

import React from 'react';

// Singleton 클래스 정의
class GlobalState {
  private static instance: GlobalState;
  public state: { [key: string]: any } = {};

  private constructor() {}

  static getInstance(): GlobalState {
    if (!GlobalState.instance) {
      GlobalState.instance = new GlobalState();
    }
    return GlobalState.instance;
  }

  getState(key: string) {
    return this.state[key];
  }

  setState(key: string, value: any) {
    this.state[key] = value;
  }
}

// 사용 예시
const App: React.FC = () => {
  const globalState = GlobalState.getInstance();

  React.useEffect(() => {
    globalState.setState('user', { name: 'John Doe' });
  }, []);

  return (
    <div>
      <h1>Global State</h1>
      <p>User: {JSON.stringify(globalState.getState('user'))}</p>
    </div>
  );
};

export default App;

---

이번 기회를 삼아 디자인 패턴을 익혀보려고 정리하였는데, 아직은 익숙하지 않은 것 같다.

생성패턴을 이해하여 보다 나은 소프트웨어 설계를 할 수 있도록 노력해야겠다.