React 18 에서 새로 도입된 createRoot 란..?

React에서 createRoot란?

createRoot는 React 18에서 도입된 새로운 렌더링 방식을 시작하는 함수입니다.
기존의 ReactDOM.render()를 대체하며, React 애플리케이션의 최상위(root) 요소를 생성하고 렌더링을 담당합니다.

---

✅ createRoot 기본 사용법

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

---

✅ createRoot의 역할

1. 애플리케이션의 "루트(root)"를 생성

   • document.getElementById("root")와 연결하여 React 앱이 브라우저에서 동작할 수 있도록 함.

2. React 18의 새로운 "동시성 모드(Concurrent Mode)"를 지원

   • 성능을 최적화하고, 렌더링을 더 효율적으로 관리할 수 있도록 함.

3. render()를 호출하여 최상위 컴포넌트를 렌더링

   • 이전에는 ReactDOM.render(<App />, document.getElementById("root")); 방식이었지만,
     React 18에서는 createRoot(rootElement).render(<App />); 형태로 변경됨.

---

✅ createRoot와 기존 ReactDOM.render()의 차이점

비교 항목	React 17 (ReactDOM.render())	React 18 (createRoot())
사용법	ReactDOM.render(<App />, rootElement);	const root = ReactDOM.createRoot(rootElement); root.render(<App />);
지원하는 모드	기본 모드 (동기 렌더링)	동시성 모드 (성능 최적화)
병렬 작업	❌ 불가능	✅ 가능 (자동 일시 중단, 배치 업데이트)
자동 배치 (Batching)	❌ 일부만 가능	✅ 모든 상태 업데이트에서 자동 배치
Strict Mode 영향	일부 기능만 제한	더 많은 경고와 개선된 개발 모드

---

✅ createRoot는 main() 함수 같은 역할인가?

✔️ 비슷한 개념이지만 정확히는 다릅니다.

• createRoot는 React 애플리케이션을 브라우저에서 실행할 준비를 하는 함수입니다.
• C/C++의 main() 함수처럼 프로그램의 시작점 역할을 하지만,
  • main()처럼 단순한 진입점이 아니라 React의 동시성 렌더링을 설정하는 역할도 포함됩니다.

---

✅ 결론

• createRoot는 React 18에서 렌더링을 시작하는 새로운 방식
• React 앱의 "루트(root)"를 생성하고 렌더링을 수행
• React 18의 동시성 모드(Concurrent Mode)를 활성화하여 성능 최적화

따라서 React 앱을 실행할 때 꼭 필요한 함수이며, main()과 유사한 역할을 하지만 더 많은 기능을 포함하고 있다고 이해하면 됩니다. 🚀