React
렌더링 HTML
리액트의 목표는 여러 가지 방법으로 웹 페이지에서 HTML을 렌더링하는 것이다.
리액트는 createRoot()라는 함수와 그것의 method render()라는 함수를 사용하여 HTML을 웹 페이지로 렌더링한다.
createRoot 함수
createRoot() 함수는 HTML 요소인 하나의 인수를 사용한다.
이 기능의 목적은 React 컴포넌트가 표시되어야 하는 HTML 요소를 정의하는 것이다.
렌더링 방법
그런 다음 렌더링해야 할 React 구성 요소를 정의하기 위해 render() 메서드를 호출한다.
근데 어디서 렌더링을 할까?
React 프로젝트의 root 디렉토리에 public이라는 이름의 다른 폴더가 있다.
이 폴더에는 index.html 파일이 있다.
이 파일의 본문에서 하나의 <div>를 볼 수 있을 것이다.
여기서 우리의 리액트 애플리케이션이 렌더링될 것이다.
예제
ID가 “root”인 요소 내부에 단락을 표시한다.
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(Hello
);
결과는 <div id=”root”>요소에 표시된다.
<body> <div id="root"></div> </body>
요소 ID를 “root”라고 부를 필요는 없지만 이는 표준 규칙이다.
HTML 코드
이 튜토리얼의 HTML 코드는 JavaScript 코드 내에 HTML 태그를 작성할 수 있는 JSX를 사용한다.
구문이 낯설더라도 걱정하지 말자.
다음 장에서 JSX에 대해 더 자세히 배울 것이다.
예제
HTML 코드가 포함된 변수를 만들고 “root” 노드에 표시한다.
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);
root 노드
root 노드는 결과를 표시하려는 HTML 요소다.
React에서 관리하는 콘텐츠를 담는 컨테이너 와 같다.
이 값은 <div> 요소일 필요는 없으며 id=’root’일 필요는 없다.
예제
루트 노드는 원하는 대로 호출할 수 있다.
<body> <header id="sandy"></header> </body>
예제
<header id=”sandy”> 요소에 결과를 표시한다.
const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);