index

리액트는 하나의 루트 노드를 가지는 컴포넌트 트리를 구축한다.

 

import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

SPA인 React이므로 html 파일은 index.html 하나만 사용. 그 속 body에

<div id="root"></div>

부분을 JS로 선택해 createRoot를 사용.React의 루트이자 렌더링될 주된 위치라는걸 알려줌.

그렇게 생성한 root 객체에서 render 호출. 그 div 위치에 렌더링을 하는것(App을)

div의 내부가 <App />이 되는 것

 

js에서 createelement 후 append 했던 과정을 react에서는

return 속에 html형식으로 작성