React의 내부구조

React.createElement

React.createElement는 JSX문법에 대해서 트랜스파일링되는 과정에서 자동적으로 호출되는 API이다. 여기서 알아두어야 하는 것은, Element는 해당 객체를 그릴 수 있는 정보들을 가진 객체일 뿐, 이를 DOM에 그리는 것은 React-DOM이 하는 일이다.

/**
 * Create and return a new ReactElement of the given type.
 * See https://reactjs.org/docs/react-api.html#createelement
 */
export function createElement(type, config, children) {
  let propName;
 
  // Reserved names are extracted
  const props = {};
 
  let key = null;
  let ref = null;
  let self = null;
  let source = null;
 
  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
 
      if (__DEV__) {
        warnIfStringRefCannotBeAutoConverted(config);
      }
    }
    if (hasValidKey(config)) {
      if (__DEV__) {
        checkKeyStringCoercion(config.key);
      }
      key = '' + config.key;
    }
 
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }
 
  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }
 
  // Resolve default props
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  if (__DEV__) {
    if (key || ref) {
      const displayName =
        typeof type === 'function'
          ? type.displayName || type.name || 'Unknown'
          : type;
      if (key) {
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

CreateElement는 인자로 type, config, children을 받는다. 보면 type을 통해서는 해당 element의 태그 이름을 담고, 해당하는 태그에 대한 attribute들을 초기화시킨다. config로는 key, ref, self, source 등의 예약된 속성들에 대해서도 관리한다. children에서는 해당 요소의 자식 요소들을 넣는다. 자식이 여러개인 경우 배열로 만들어 넣는다. 최종적으로는 이를 ReactElement함수에 인자로 다시금 넣어 리턴시킨다.

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows 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,
  };
 
  if (__DEV__) {
    // The validation flag is currently mutative. We put it on
    // an external backing store so that we can freeze the whole object.
    // This can be replaced with a WeakMap once they are implemented in
    // commonly used development environments.
    element._store = {};
 
    // To make comparing ReactElements easier for testing purposes, we make
    // the validation flag non-enumerable (where possible, which should
    // include every environment we run tests in), so the test framework
    // ignores it.
    Object.defineProperty(element._store, 'validated', {
      configurable: false,
      enumerable: false,
      writable: true,
      value: false,
    });
    // self and source are DEV only properties.
    Object.defineProperty(element, '_self', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: self,
    });
    // Two elements created in two different places should be considered
    // equal for testing purposes and therefore we hide it from enumeration.
    Object.defineProperty(element, '_source', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: source,
    });
    if (Object.freeze) {
      Object.freeze(element.props);
      Object.freeze(element);
    }
  }
 
  return element;
};

최종적으로는 필요한 property에 대해서 정의하고, 이를 Immutable하게 바꾼 뒤 객체를 다시금 리턴시키는 형태이다.

React.Component

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}
 
Component.prototype.isReactComponent = {};
 
Component.prototype.setState = function(partialState, callback) {
  if (
    typeof partialState !== 'object' &&
    typeof partialState !== 'function' &&
    partialState != null
  ) {
    throw new Error(
      'setState(...): takes an object of state variables to update or a ' +
        'function which returns an object of state variables.',
    );
  }
 
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

React.component는 재사용가능한 UI를 하나의 묶음으로 묶은 것이다. 이 component는 element들이 모여 하나의 component를 이룬다.

이 updater의 enqueueSetState의 구조는

  enqueueSetState(inst, payload, callback) {
    const fiber = getInstance(inst);
    const eventTime = requestEventTime();
    const lane = requestUpdateLane(fiber);
 
    const update = createUpdate(eventTime, lane);
    update.payload = payload;
    if (callback !== undefined && callback !== null) {
      if (__DEV__) {
        warnOnInvalidCallback(callback, 'setState');
      }
      update.callback = callback;
    }

이런 식으로 되어 있는데, 파이버를 인스턴스로부터 가져오고, 이를 업데이트 시키도록 UpdateLane이라는 곳으로 요청을 보내고 있다. 이벤트의 경우는 updateLane이라는 queue에서 순차적으로 처리하는 구조인 것 같다.

ReactDOM.render

export function render(
  element: React$Element<any>,
  container: Container,
  callback: ?Function,
) {
  if (__DEV__) {
    console.error(
      'ReactDOM.render is no longer supported in React 18. Use createRoot ' +
        'instead. Until you switch to the new API, your app will behave as ' +
        "if it's running React 17. Learn " +
        'more: https://reactjs.org/link/switch-to-createroot',
    );
  }
 
  if (!isValidContainerLegacy(container)) {
    throw new Error('Target container is not a DOM element.');
  }
 
  if (__DEV__) {
    const isModernRoot =
      isContainerMarkedAsRoot(container) &&
      container._reactRootContainer === undefined;
    if (isModernRoot) {
      console.error(
        'You are calling ReactDOM.render() on a container that was previously ' +
          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
          'Did you mean to call root.render(element)?',
      );
    }
  }
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );

코드가 복잡하지만 파악할 수 있는 부분은Dom Element인 container 와 React Element인 element를 인자로 받아서 Container의 SubTree로 리액트 엘리먼트를 Render 한다는 것을 파악할 수 있다.
01. 컨테이너 DOM Element 안에 자체적인 DOM 트리를 만든다.
02. 그 안의 컴포넌트들의 변경 사항이 있으면, updateQueue에 등록한다.
03. 해당 updateQueue의 변경 사항들이 배치처리를 통해 실행된다.