React | src/index.js 분석

🔷리액트를 다루는 기술 #4

 

 

🔵src/index.js 분석하기 ?

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root')); //#1
root.render(//#2
  <React.StrictMode>//#3
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();//#4

 

 

#1

root 인 HTML의 요소를 찾아서 ( 이 요소는 public/index.html 에 있음)

리액트 컴포넌트를 보여줄 수 있는 루트 인스턴스를 createRoot 함수를 사용하여 생성한다.

 

#2

root.render 함수에 JSX코드를 인자로 넣어, 보여주고싶은 컴포넌트를 랜더링(화면에 보여주기)한다.

 

#3

React.StrictMode 라는 컴포넌트는

리액트 프로젝트에서 앞으로 사라질 레거시 기능을 사용할 때 경고를 주고,

앞으로 미래의 리액트 버전에 도입될 기능들이 정상적으로 호환될 수 있도록 유도하는 개발환경에서만 활성화되는 디버깅용 컴포넌트이다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

#4

reportWebVitals는 웹 성능을 측정하는 도구이다.