[지식루프 IT공부] 리액트 - main.jsx

아래 코드는 리액트 앱의 시작점, 즉 "리액트가 HTML에 어떻게 연결되는지" 보여주는 기본 예제야.  (리액트 버전 18이후에 사용할 수 있는 예제임)

import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<h1>안녕 리액트!</h1>);

작동 원리 한 줄 요약

이 코드는 👉 HTML 파일의 특정 요소(id="root") 안에 리액트 요소(<h1>안녕 리액트!</h1>)를 그려주는 코드야.

---

한 줄씩 아주 쉽게 설명해줄게

1️⃣ import ReactDOM from "react-dom/client";

• 리액트에서 HTML DOM에 뭔가를 렌더링할 때 쓰는 도구가 ReactDOM이야.
• "react-dom/client"는 React 18부터 쓰는 새 방식이야.
• 구버전에서는 그냥 "react-dom"에서 render()를 직접 썼어.

---

2️⃣ document.getElementById("root")

• HTML에서 아래와 같은 코드가 있다고 치면:
• <div id="root"></div>
• 이걸 자바스크립트로 불러오는 거야. 즉:
• 👉 "root라는 id를 가진 div 요소를 찾아줘!" 라는 뜻

---

3️⃣ ReactDOM.createRoot(...)

• 이건 React 18의 새로운 방식이야.
• 기존에는 ReactDOM.render(...)만 썼는데, 이젠 "root를 먼저 만들고 거기에 그린다(render)" 라고 나눠서 씀.

const root = ReactDOM.createRoot(...);

• 이렇게 하면 "이제부터 여기(root)에 리액트를 그릴 준비 완료!" 라는 의미가 돼.

---

4️⃣ root.render(<h1>안녕 리액트!</h1>);

• render()는 진짜로 그리는 동작이야.
• <h1>안녕 리액트!</h1>는 리액트 엘리먼트(컴포넌트처럼 생겼지만 그냥 태그임)
• 그래서 화면에 이걸 HTML처럼 보여줘.

---

🔁 전체 흐름 그림으로 표현하면

HTML:
<div id="root"></div>

↓ 자바스크립트에서 이 요소 찾고
const root = ReactDOM.createRoot(document.getElementById("root"))

↓ 이 안에 리액트 엘리먼트를 넣음
root.render(<h1>안녕 리액트!</h1>)

 

---

끝.