DOM으로 렌더하기
React는 DOM으로 React 노드를 렌더하는 데 사용될 수 있는 ReactDOM.render() 함수를 react-dom으로부터 제공합니다. 우리는 이번 챕터에서 이미 render() 함수가 사용되는 걸 본 적이 있죠.
아래의 코드 예제를 보시면, ReactDOM.render()을 사용해 React 노드인 '<li>'와 '<foo-bar>'가 DOM으로 렌더됩니다.
한 번 DOM으로 렌더되면, 업데이트된 HTML은 다음과 같습니다:
<body>
<div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
<div id="app2"><foo-bar classname="bar" children="foo" data-reactid=".1">foo</foo-bar></div>
</body>
ReactDOM.render() 함수는 먼저 React 노드가 가상 DOM으로 가는 방법으로 사용되고, 그 후 HTML DOM으로 가능 방법으로도 사용됩니다.
메모
- DOM 요소 안의 DOM 노드는 렌더되고 있다면 어떤 노드든 대체(예: 제거)됩니다.
ReactDOM.render()는 React가 렌더되는 대상인 DOM 요소 노드를 변경하지 않습니다. 하지만 렌더되는 React가 완전한 노드의 소유권을 원하는 경우에는, React가 React 노드/컴포넌트를 주입하고 있는 노드에서 자식을 추가하거나 제거하면 안됩니다.- React는 HTML DOM으로 렌더할 수 밖에 없습니다. 하지만 가능한 다른 렌더링 API가 있습니다. 예를 들면, React는 서버 사이드의 문자열(예:
ReactDOMServer.renderToString())로도 렌더하는 것이 가능합니다. - 같은 DOM 요소로 다시 렌더하는 것은 만약 변한 부분이 있거나 새로운 자식 노드가 추가되었을 때만 현재의 자식 노드들을 업데이트합니다.