render

render(reactNode, domNode, callback?)

• Reference참조
  • render(reactNode, domNode, callback?)
• Usage사용법
  • Rendering the root component루트 컴포넌트 렌더링
  • Rendering multiple roots여러개의 루트 렌더링하기
  • Updating the rendered tree렌더링된 트리 업데이트하기

Reference참조

render(reactNode, domNode, callback?)

Call render to display a React component inside a browser DOM element. render를 호출하여 브라우저 DOM 엘리먼트 안에 React 컴포넌트를 표시합니다.

import { render } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

React will display <App /> in the domNode, and take over managing the DOM inside it. React는 domNode에 <App />을 표시하고 그 안에 있는 DOM을 관리합니다.

An app fully built with React will usually only have one render call with its root component. A page that uses “sprinkles” of React for parts of the page may have as many render calls as needed. React로 완전히 빌드된 앱은 일반적으로 루트 컴포넌트에 render호출이 하나만 있습니다. 페이지의 일부에 React를 “뿌려서” 사용하는 페이지에는 render호출이 필요한 만큼 많이 있을 수도 있습니다.

See more examples below. 아래에서 더 많은 예시를 확인하세요.

Parameters매개변수

• reactNode: A React node that you want to display. This will usually be a piece of JSX like <App />, but you can also pass a React element constructed with createElement(), a string, a number, null, or undefined. reactNode: 표시하려는 React 노드. 일반적으로 <App />과 같은 JSX 조각이지만, createElement()로 만든 React 엘리먼트나 문자열, 숫자, null, undefined 등을 전달할 수도 있습니다.

• domNode: A DOM element. React will display the reactNode you pass inside this DOM element. From this moment, React will manage the DOM inside the domNode and update it when your React tree changes. domNode: DOM 엘리먼트. React는 이 DOM 엘리먼트 안에 전달한 reactNode를 표시합니다. 이 순간부터 React는 domNode 내부의 DOM을 관리하고 React 트리가 변경되면 이를 업데이트합니다.

• optional callback: A function. If passed, React will call it after your component is placed into the DOM. 선택적 callback: 함수. React는 컴포넌트가 DOM에 배치된 후에 이 함수를 호출합니다.

Returns반환값

render usually returns null. However, if the reactNode you pass is a class component, then it will return an instance of that component. render는 보통 null을 반환합니다. 다만 전달한 reactNode가 클래스 컴포넌트인 경우에는 해당 컴포넌트의 인스턴스를 반환합니다.

Caveats주의사항

• In React 18, render was replaced by createRoot. Please use createRoot for React 18 and beyond. React 18에서는 render가 createRoot로 대체되었습니다. React 18 이상에서는 createRoot를 사용하세요.

• The first time you call render, React will clear all the existing HTML content inside the domNode before rendering the React component into it. If your domNode contains HTML generated by React on the server or during the build, use hydrate() instead, which attaches the event handlers to the existing HTML. render를 처음 호출할 때 React는 domNode 내부의 모든 기존 HTML 콘텐츠를 지운 후 React 컴포넌트를 렌더링합니다. 서버에서나 빌드 중에 React에 의해 생성된 HTML이 domNode에 포함된 경우, 대신 이벤트 핸들러를 기존 HTML에 첨부해주는 hydrate()를 사용하세요.

• If you call render on the same domNode more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by “matching it up” with the previously rendered tree. Calling render on the same domNode again is similar to calling the set function on the root component: React avoids unnecessary DOM updates. 동일한 domNode에서 render를 두 번 이상 호출하면 React는 전달한 최신 JSX를 반영하기 위해 필요에 따라 DOM을 업데이트합니다. React는 이전에 렌더링된 트리와 “매칭”하여 재사용할 수 있는 부분과 다시 만들어야 하는 부분을 결정합니다. 동일한 domNode에서 render를 다시 호출하면, 루트 컴포넌트에서 set 함수를 호출하는 것과 비슷하게 불필요한 DOM 업데이트를 하지 않습니다.

• If your app is fully built with React, you’ll likely have only one render call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn’t a child of your component (for example, a modal or a tooltip), use createPortal instead of render. 앱이 React로 완전히 빌드된 경우, 앱에 render 호출이 한 번만 있을 가능성이 높습니다. (프레임워크를 사용하는 경우 프레임워크가 이 호출을 대신 수행할 수 있습니다.) 컴포넌트의 자식이 아닌 DOM 트리의 다른 부분(예: 모달 또는 툴팁)에서 JSX 조각을 렌더링하려는 경우 render 대신 createPortal을 사용하세요.

Usage사용법

Call render to display a React component inside a browser DOM node. render를 호출하여 브라우저 DOM 노드 안에 React 컴포넌트를 표시하세요.

import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

Rendering the root component루트 컴포넌트 렌더링

In apps fully built with React, you will usually only do this once at startup—to render the “root” component. React로 완전히 빌드된 앱에서는, 초기화시 “루트” 컴포넌트를 렌더링하기 위해 일반적으로 이 작업을 한 번만 수행합니다.

Usually you shouldn’t need to call render again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will use state. 일반적으로 render 를 다시 호출하거나 더 많은 위치에서 호출할 필요는 없습니다. 이 시점부터 React는 애플리케이션의 DOM을 관리하게 됩니다. UI를 업데이트하기 위해 컴포넌트는 state를 사용합니다.

Rendering multiple roots여러개의 루트 렌더링하기

If your page isn’t fully built with React, call render for each top-level piece of UI managed by React. 페이지가 React로 완전히 빌드되지 않은 경우, React가 관리하는 각 최상위 UI에 대해 render를 호출하세요.

You can destroy the rendered trees with unmountComponentAtNode(). 렌더링된 트리는 unmountComponentAtNode()로 파괴할 수 있습니다.

Updating the rendered tree렌더링된 트리 업데이트하기

You can call render more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will preserve the state. Notice how you can type in the input, which means that the updates from repeated render calls every second are not destructive: 동일한 DOM 노드에서 render를 두 번 이상 호출할 수도 있습니다. 컴포넌트 트리 구조가 이전에 렌더링된 것과 일치하는 한, React는 그 state를 유지합니다. input에 타이핑하더라도 매초마다 반복되는 render 호출로 인해 업데이트가 손상되지 않는 것을 확인해 보세요:

It is uncommon to call render multiple times. Usually, you’ll update state inside your components instead. render를 여러 번 호출하는 경우는 흔하지 않습니다. 보통은 컴포넌트 내부에서 state를 업데이트하는 경우가 많습니다.