Factory Method Pattern

ReactElement.js를 보다가 주석에서 Factory method를 보았다. Factory method(Virtual Constructor)는 무엇인가?

// ReactElement.js ("react": "^15.4.2")

/**
 * Factory method to create a new React element. This no longer adheres to
 * the class pattern, so do not use new to call it. Also, no instanceof check
 * will work. Instead test $$typeof field against Symbol.for('react.element') to check
 * if something is a React Element.
 *

 

Factory method

객체를 생성하기 위한 인터페이스를 정의하고, 인스턴스 생성은 서브클래스가 결정하게하는 디자인 패턴이다.

GoF는 다음과 같이 말한다.

객체를 생성하기 위해 인터페이스를 정의하지만, 어떤 클래스의 인스턴스를 생성할지에 대한 결정은 서브(자식)클래스가 내리도록 합니다. 클래스의 인스턴스화는 서브클래스로 지연합니다. [GoF, p107]

 

즉, 객체 생성을 캡슐화하는 패턴이다.

Creator의 서브클래스에 팩토리 메소드를 정의하여, 팩토리 메소드 호출로 적절한 ConcreteProduct 인스턴스를 반환하게 한다.

 

상위 클래스는 객체를 생성하는 인터페이스만 제공하며, 서브 클래스가 실제로 객체를 생성하도록하는 패턴이다. 이때, 상위 클래스의 인터페이스가 팩토리 메서드이다.

 

사용 상황

• 어떤 클래스가 자신이 생성해야 하는 객체의 클래스를 예측할 수 없을 때
• 생성할 객체를 기술하는 책임을 자신의 서브클래스가 지정했으면 할 때

 

ReactElement

ReactElement를 보자. (자세한 코드는 ReactElement.js 링크 참고)

 

var ReactElement = function (type, key, ref, self, source, owner, props) {
  var element = {
    // This tag allow us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner
  };

  ...

  return element;
};

Object Literal로 element를 만든다음 반환하는 것을 볼 수 있다. ReactElement는 팩토리 메서드로써 기본 React Element의 properties를 정의하고 있다. 

 

아래는 React.createElement이다.

ReactElement.createElement = function (type, config, children) {
 
  ...
 
  return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
};

 

아래는 React.cloneElement이다.

ReactElement.cloneElement = function (element, config, children) {
   
  ... 
   
  return ReactElement(element.type, key, ref, self, source, owner, props);
};

 

createElement와 cloneElement에서 우리는 React Element를 만드는 방법을 모르지만, ReactElement를 통해서 원하는 조건의 element를 생성해서 반환할 수 있다.

 

즉, ReactElement는 createElement와 cloneElement에서 준 값을 기반으로 React element를 반환하는 틀인것이다. 팩토리 메소드에서 인스턴스의 생성이 자식클래스에서 결정된 것이다.

 

참고

https://refactoring.guru/design-patterns/factory-method

Factory Method