React.js - ReactDOM.render() 메서드

---

ReactDOM.render()란?

---

 

안녕하세요.

고코더 입니다. 

 

 

 

● 1. ReactDOM.render() 함수를 통해 Web API(document.createElement)를 사용하여 웹 브라우저에 그려주는 함수입니다.  React.createElement를 통해 Object를 생성하고 이를 In-Memory에 저장합니다. Root DOM Node에 랜더링 하기 위해서 이를 사용합니다. 지금까지 따라한 예제에서 루트 DOM 노드에 이 메서드를 사용했었습니다.

 

● 2. 그렇다면 해당 ReactDOM.render() 메서드의 파라미터 형태를 함께 알아보겠습니다.

 

2번 라인 : 화면에 그려질 리액트의 element를 말합니다. 

3번 라인 : 리액트 element를 해당 container DOM에 랜더링 합니다.  

4번 라인 : 랜더링 후에 반환되는 값을 돌려주는 콜백 함수 입니다. 자유롭게 선언이 가능합니다. 

ReactDOM.render(
    element, 
    container, 
    [callback]
)

 

● 3. ReactDOM.render를 구현한 리액트 내부 소스입니다. 참조

export function render(
  element: React$Element<any>,
  container: DOMContainer,
  callback: ?Function,
) {
  // ...
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );
}

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: DOMContainer,
  forceHydrate: boolean,
  callback: ?Function,
) {

  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
  // member of intersection type." Whyyyyyy.
  let root: RootType = (container._reactRootContainer: any);
  let fiberRoot;
  if (!root) {
    // Initial mount
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    //  for the first render, the update is not marked as batched.
    unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Update
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

 

 

---

마무리

---

 

리액트 요소를 루트 DOM 노드에 랜더링 하고 싶을때

바로 ReactDOM.render()를 사용하면 됩니다.