유데미 react

페이지를 불러올 때마다 가장 처음으로 실행되는 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(<App />);

사실 이게 실행되는 게 아니고

변환된 버전의 코드가 실행

npm start → 코드 확인 →

자바스크립트 코드를 더 브라우저 친화적인 코드로 변환 → 브라우저에 코드 전달

브라우저 안에서 작업을 하는 것 전달 전에

import한 css 파일은 JS로 변환됨

react-dom이라는 제 3의 라이브러리로부터 ReactDOM 객체를 가져온다.

react, react-dom에서 ReactDOM과 같은 객체 썸띵을 가져올 땐 리액트 라이브러리에서 가져오는 것이고 리액트 기능을 사용하게 되는 것

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

root 변수를 선언해서 ReactDOM객체에서 미리 선언된 createRoot메서드를 넣는다

리액트 돔 라이브러리에서 선언된 메서드임

createRoot는 불러온 웹페이지상에서 리액트로 구축할 ui인 리액트 앱을 어디에 배치해야 하는지 리액트에게 알려줌

이 메서드로 인해 PUblic 폴더에 있는 INDEX.html 파일로 이동한다.

index.html 싱글 html 파일로 브라우저가 불러오는 파일

전체 리액트앱에서 사용하는 유일한 html 파일 : 리액트가 주도하는 ui가 렌더링되어야 하는 위치

가 들어있음

그래서 싱글 페이지 애플리케이션

const root = ReactDOM.createRoot(index.html에 있는 <div id="root" />);
root.render(<App />);

createRoot(태그) 이 태그가 리액트 앱의 루트라는 걸 알려줌

메일 리액트 앱이 렌더링될 곳

reacDOM.creatRoot(