1. React의 핵심파일
- Index.html
- Index.js
- App.js
Index.html
리액트는 SPA여서 하나의 html파일에 페이지를 갈아끼워주는 형식으로 동작한다. 즉 Index.html이 실행되고, 그 위에 js파일들이 올라가는 형식이다.
파일을 보면 'root' div가 존재한다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>Index.js
Index.html에 띄워줄 App.js를 랜더함수를 이용하여, 랜더링 시킨다.
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js
우리가 실제로 보는 화면을 정의한다. 즉 컴포넌트를 정의한다.
요약하자면
1. App.js 컴포넌트가
2. Index.js 로 인하여
3. Index.html 에 랜더된다.
4. 이로써 우리가 보는 화면이 보여진다.
사람들의 더 나은 삶을 위한 개발자