3. 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>

);

 

 

React-Dom : React의 순수 자바스크립트와 다른 문법으로 짜여진 코드를 Babel 를 통하여 변환한 후, HTML 문서와 연결하는 역할을 수행

 

렌더링

 

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

 

div id = 'root' 인 index.html에 렌더링할 부분을 생성

 

root.render(

    <React.StrictMode>

          <App />

    </React.StrictMode>

);

 

<App /> 가 실행됨

 

React.StrictMode : 애플리케이션의 잠재적인 문제를 알아내는 도구