1.index.html
- 브라우저에서 접속시 가장 기준점이 되는 파일로, /public 폴더에 위치하며, 루트요소는 리액트앱의 실행결과를 출력한다.
<!DOCTYPE html>
<html lang="ko">
<head> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
</head>
<body>
<div id="root"></div> // 루트요소라고 부른다
</body>
</html>
2. index.js
- 리액트앱이 실행할때 가장 먼저 호출되는 엔트리 파일이다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);- createRoot(container , {option})을 인자로 가진다. 컨테이너는 React가 마운트할 Dom요소를 의미한다. createRoot 함수 자체가 동시성을 제공하는 스위치 역할을 한다. 실제 동시서을 하려면 훅을 사용해야하지만, 18이전 버전에서 사용한다고 한들 실제 적용되지 않는다. createRoot 자체가 이 앱을 Concurrent스케쥴러로 돌려라고 알려주는 역할이다.
이전 버전(18이전 버전)은 동시성을 제공하지 않는다.(아래코드는 이전 버전)
import ReactDOM from 'react-dom';
ReactDOM.render(<App/>, document.getElementById('root')); 3. Dom까지 반영되는 과정
리액트는 가상DOM을 쓴다는것은 많이 알려져있다. 실제Dom까지 반영되는 과정은 아래와 같다.
크게 2가지 과정으로 나눠진다. 상태 변경 → 렌더링(컴포넌트 실행) → Reconciliation(Diff) → Commit(DOM 반영)
- 상태변경 : state, props, store와 같은 값들이 변경시를 의미한다.
- 렌더링: 컴포넌트 함수를 실행하는 과정을 의미한다.(계산 과정이다)
- Reconciliation : VDom의 이전과 새VDom의 diff를 찾아내는 과정이다.
- commit : 실제 dom에 반영하는 과정
이때 commit 직후 Paint이전에 호출되는 훅은 useLayoutEffect이며 Paint이후에 호출되는 훅은 useEffect이다.
cf)Paint란? 브라우저가 픽셀을 화면에 그리는 단계이다.(리액트가 관여하는 단계는 아니고 브라우저가 관여하는 단게이다)
안녕하세요