대응: HTML 요소를 DOM에 렌더링

대응: HTML 요소를 DOM에 렌더링

React를 사용하면 ReactDOM이라고 알려진 React의 렌더링 API를 사용하여 이 JSX를 HTML DOM에 직접 렌더링할 수 있습니다.

ReactDOM이 무엇입니까?

ReactDOM은 다음과 같은 DOM에 React 요소를 렌더링할 수 있는 간단한 방법을 제공합니다. ReactDOM.render(구성 요소 ToRender, 대상 노드)입니다. 여기서 첫 번째 인수는 렌더링할 반응 요소 또는 구성 요소이고 두 번째 인수는 구성 요소를 렌더링할 DOM 노드입니다.

ReactDOM.render()는 JSX 요소 문 뒤에 호출되어야 합니다.

ReactDOM.render() 메서드를 사용하여 이 구성요소를 페이지에 렌더링합니다. 정의된 JSX 요소를 첫 번째 인수로 직접 전달하고 document.getElementById()를 사용하여 렌더링할 DOM 노드를 선택할 수 있습니다. 이 특정 예제의 경우, 그들은 항상 id= div-node 를 사용할 수 있는 div를 가지고 있습니다.

const JSX = ( Hello World Lets render this to the DOM {/* we want to render this entire element JSX to the page */} ); ReactDOM.render(JSX, document.getElementById('challenge-node')) {/* Inspect it will have a id='challenge-node' where it currently doesn't have a text, so we're trying to inject this JSX component into the interior of this challenge-node */}

from http://gong-tech.tistory.com/6 by ccl(A) rewrite - 2021-09-22 04:26:37