리액트 동작 원리 알아보기

리액트는 우리가 작성한 프로젝트 폴더에 있는 코드를 자바스크립트를 이용하여 해석합니다.

그리고 해석한 결과물을 index.html로 끼워 넣습니다.

 

 

리액트는 index.html의 <div id="root"></div> 중간에 넣을 결과물을 프로젝트 폴더에 있는 파일(App.js, ...)을 해석하여 만들어 넣는 역활을 담당합니다.

 

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 />);

 

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

위 코드는 App.js 파일에 작성한 코드를 index.html 의 아이디가 'root'인 엘리먼트에서 넣어주는 것입니다.

function App() {
  return <div>안녕!!!</div>;
}

export default App;

 

리액트는 index.js에 있는 ReadDOM.render()를 통해 App.js에 있는 <div>안녕!!!</div>를 index.html에 넣어줍니다.

 

리액트의 장점

리액트가 화면을 빠르게 그릴 수 있게 해주는 장점이 있습니다.

리액트가 이런 장점을 가질 수 있는 데에는 아래 그림과 같은 원리가 있습니다.

 

가장 왼쪽은 빈 index.html이고, 오른쪽은 App.js를 해석하며 점점 채워지는 index.html입니다.

리액트는 모든 HTML을 그려넣지 않고, 일부 HTML만 그리고 이후 엘리먼트를 추가하거나 제거하는 방식으로 화면을 그립니다.

리액트는 화면에 표시될 모든 HTML을 처음부터 그리지 않으니까 빠른 겁니다.