[리액트]기본코드 정리

1. App.js
- function App()이 리턴한 값이 id가 root인 곳의 아래로 들어갔다


2. index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

- 뭔가를 화면에 그린다.-render
- <React.StrictMode> 안에 <App/>이라고 작성해서, App이라는 함수가 반환하는 값을, document의 id가 root인 요소의 밑에 render 하겠다.
- 최상위 컴포넌트를 정의할 수 있다. 즉, App.js가 아닌 내가 만든 footer.js와 같은 것으로

 

 

3. index.html
- id가 root인 곳은 public폴더의 index.html

 

 

 

<정리>
src 밑에 index.js가 실행되면서, index.html에 있는 id가 root인 div아래로, App.js안에 있는 App함수가 리턴하는 값들이 들어간다.