[React] - React 18의 새로운 API ('createRoot')

첫 번째 코드

React 18

import React from 'react';
import ReactDOM from 'react-dom/client';

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

 

• React 18 이상: React 18에서는 새로운 Root API인 ReactDOM.createRoot를 사용합니다.
• Concurrent Mode 지원: 이 새로운 API는 React의 Concurrent Mode와 더 나은 성능 최적화를 지원합니다.
• 사용법
  1. createRoot를 사용하여 root를 생성합니다.
  2. 생성된 root에서 render 메서드를 호출합니다.

 

두 번째 코드

React 17

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>안녕 리액트 !</h1>,
  document.getElementById('root')
);

 

• React 17 및 이전 버전: 이 방식은 React 17 및 그 이전 버전에서 사용됩니다.
• 기존 렌더링 방식: 전통적인 ReactDOM.render 메서드를 사용합니다.
• 사용법: ReactDOM.render 메서드를 사용하여 애플리케이션을 DOM에 렌더링합니다.

 

 

두 방식의 주요 차이점

React 18의 새로운 기능을 사용할 수 있느냐 ? 없느냐 ?

결론

React 18을 사용하고 Concurrent Mode와 같은 새로운 기능을 활용하려면 ReactDOM.createRoot를 사용하는 것이 좋습니다.  :) 😊

 

Concurrent Mode

React 18에서 도입된 새로운 기능으로, 애플리케이션의 렌더링 성능을 향상시키기 위한 모드입니다.

1. 애플리케이션이 더 반응성이 높고 사용자의 상호작용에 빠르게 응답할 수 있도록 돕습니다.
2. React의 기존 렌더링 모델을 개선
3. 브라우저의 메인 스레드가 블로킹되지 않도록 하여, 애플리케이션이 더 자연스럽고 매끄럽게 동작할 수 있게 합니다.

주요 개념 및 특징

1. Interruptible Rendering (중단 가능한 렌더링)
   • 기존의 동기 렌더링 방식에서는 렌더링 작업이 시작되면 중간에 중단할 수 없었습니다. 하지만 Concurrent Mode에서는 렌더링 작업이 중단 가능하고, 우선순위가 높은 작업이 먼저 처리될 수 있습니다. 이렇게 하면 사용자 인터페이스가 더 빠르게 반응할 수 있습니다.
2. Scheduling (스케줄링)
   • Concurrent Mode는 React의 스케줄링 알고리즘을 사용하여, 렌더링 작업의 우선순위를 관리합니다. 우선순위가 높은 작업(예: 사용자 입력 처리)이 먼저 처리되고, 우선순위가 낮은 작업(예: 데이터 패칭)은 나중에 처리됩니다.
3. Suspense
   • Concurrent Mode는 Suspense 컴포넌트를 활용하여, 데이터가 로딩될 때까지 특정 컴포넌트의 렌더링을 지연시킬 수 있습니다. 이는 비동기 데이터 로딩 시점에 사용자에게 로딩 스피너와 같은 피드백을 제공할 수 있게 합니다.
4. Automatic Batching
   • Concurrent Mode에서는 여러 상태 업데이트가 자동으로 배치되어, 불필요한 재렌더링을 줄이고 성능을 최적화합니다.

Concurrent Mode는 ReactDOM.createRoot 을 사용하여 활성화할 수 있다.

 

Concurrent Mode의 이점

1. 더 빠른 응답성
   • 사용자 인터페이스가 더 빠르게 반응하며, 느린 렌더링 작업이 사용자 경험에 영향을 주지 않도록 합니다.
2. 매끄러운 사용자 경험
   • 애니메이션이나 화면 전환이 더 부드럽게 실행되며, 사용자가 애플리케이션을 사용할 때 중단 없이 자연스러운 경험을 제공합니다.
3. 효율적인 리소스 사용
   • 불필요한 렌더링을 줄이고, 브라우저의 메인 스레드가 블로킹되지 않도록 하여 시스템 리소스를 효율적으로 사용합니다.