> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/start/jsx-react/reactdom.render.md).

# ReactDOM.render()

[ReactDOM.render()](https://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom)은 가상돔을 실제 돔에 마운트 할 때 사용한다. 

아래와 같이 함수 컴포넌트를 마운트 할 때는 첫번째 인자에 \<App /> 와 같은 키워드를 사용한다.&#x20;

```javascript
function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
```

React 요소를 변수에 담아 실제 돔에 마운트 할 때는 변수의 이름을 그대로 첫번째인자에 담아준다.&#x20;

```javascript
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
```

`setInteval()`을 사용해서 시간차를 줄 수 있다.&#x20;

```javascript
function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

function time() {
  ReactDOM.render(<App />, document.getElementById("root"));
}

setInterval(time, 3000);
```