ReactDOM.createRoot 🆚 ReactDOM.render

ReactDOM.createRoot는 무엇이며 ReactDOM.render와 어떻게 다릅니까?

React 18은 새로운 루트 API를 도입했습니다.

👉 현재 API

명시적으로 렌더링할 때마다 함수를 렌더링하기 위해 container를 전달해야 합니다.

const container = document.querySelector('#root');

// Initial render. Container is explicitly accessed.
ReactDOM.render(<App text="Hello" />, container);

// Subsequent renders. Container is explicitly accessed.
ReactDOM.render(<App text="Hello world!" />, container);

👉 ReactDOM.render는 무엇을 가져가나요?
render 함수는 세 개의 인수를 취합니다.

렌더링할 React 요소

렌더링할 DOM 요소

렌더링이 발생한 후 실행될 함수

그리고 동일한 container 을 반환하지만 렌더링된 구성 요소가 있습니다.

/**
* @param element - React element to be rendered
* @param container - DOM element to render in
* @param callback - function to be executed after render happens
* @return container - container with renderned component
*/
function render(element, container, callback) {
  // ...
}

👉 ReactDOM.render는 후드 아래에서 어떻게 작동합니까?
ReactDOM.render는 몇 가지 유효성 검사를 수행합니다.

컨테이너가 적합한 노드인지 여부

컨테이너가 이전에 createRoot로 전달되지 않았는지 여부

그런 다음 수신된 모든 인수를 legacyRenderSubtreeIntoContainer 에 전달합니다.

// simplified structure
function render(element, container, callback) {
  if (isValidContainer(element)) {
    throw Error('Target container is not a DOM element.');
  }

  if (isContainerMarkedAsRoot(container) && container._reactRootContainer === undefined) {
    // don't throw an error, but logs it into console
    error('container was previously passed to ReactDOM.createRoot().');
  }

  return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
}

👉 새로운 API

명시적으로 렌더링할 때마다 컨테이너를 전달하는 문제를 해결합니다.

// First, we create a root
const root = ReactDOM.createRoot(document.querySelector('#root'));

// Initial render. Container is implicitly accessed.
root.render(<App name="Hello" />);

// Subsequent renders. Container is implicitly accessed.
root.render(<App name="Hello world!" />);

👉 ReactDOM.createRoot는 무엇을 가져가나요?
createRoot 함수는 하나의 필수 인수(렌더링할 DOM 요소)만 사용합니다.
그리고 render 및 unmount 메소드가 있는 RootType 를 반환합니다.

추신 또한 createRoot는 두 번째 RootOptions 인수를 취하지만 향후 이를 검토할 것입니다.

/**
* @param container - DOM element to render in
* @param options - options, related to hydration
* @return RootType - instance of root
*/
function createRoot(container, options) {
  // ...
}

👉 ReactDOM.createRoot는 후드 아래에서 어떻게 작동합니까?

렌더링 기능 위에 createRoot :

컨테이너가 본문 요소가 아닌지 확인합니다.

좀 더 자세한 경고를 제공합니다

.

그런 다음 createRoot 새 ReactDOMRoot 개체를 인스턴스화하고 반환합니다. 아니legacyRenderSubtreeIntoContainer 전혀!

// simplified structure
function createRoot(container, options) {
  if (isValidContainer(element)) {
    throw Error('Target container is not a DOM element.');
  }

  if (container.nodeType === 1 && container.tagName.toUpperCase() === 'BODY') {
    console.error('Creating roots directly with document.body is discouraged');
  }

  if (isContainerMarkedAsRoot(container) {
    if (container._reactRootContainer) {
      console.error('container was previously passed to ReactDOM.render().')
    } else {
      console.error('container has already been passed to createRoot() before.');
    }
  }

  return new ReactDOMRoot(container, options);
}

이제 이전 렌더링과 새createRoot 함수 간의 밑줄 차이를 알았습니다!
legacyRenderSubtreeIntoContainer 와 new ReactDOMRoot 를 더 비교하고 싶다면 알려주세요.

추신 이와 같은 더 많은 콘텐츠를 위해!









닉 | 리액트 팅커러 ⚛️









React Fragments는 어떻게 구현됩니까? React는 깔끔하고 깨끗한 상태를 유지하는 것을 목표로 하고 있습니다. 이것이 바로 프래그먼트가 존재하는 이유입니다. 여러 요소를 렌더링하는 동안 과도한 래퍼를 제거할 수 있습니다! 꽤 멋지지만 내부에서 어떻게 작동합니까? 🧵👇


오후 17:34 - 2022년 1월 25일