React 18에서 createRoot로 바뀐 이유?

React 18에서 createRoot API가 도입된 것은 주로 Concurrent Mode와의 호환성 및 해당 모드의 최적화된 동작을 위해서입니다. 이는 비동기 렌더링과 여러 개의 작업을 동시에 수행할 수 있는 기능을 활성화하기 위한 것입니다.

createRoot는 다음과 같은 목적으로 도입되었습니다:

1. Concurrent Mode 지원

기존의 ReactDOM.render() 방식은 Concurrent Mode를 지원하지 않습니다. createRoot를 사용하면 Concurrent Mode를 활성화하여 애플리케이션의 반응성을 향상시킬 수 있습니다.

2. 더 나은 이벤트 처리

createRoot는 이벤트 처리 메커니즘에 몇 가지 개선을 도입했습니다. 이로 인해 이벤트가 더욱 빠르고 정확하게 처리될 수 있습니다.

3. Future-proofing:

React 팀은 createRoot를 통해 미래의 업데이트와 기능 추가를 더 잘 지원할 수 있도록 설계하였습니다. 이는 React의 코드베이스를 더욱 단순화하고 향후 기능 추가나 변경을 더욱 용이하게 만듭니다.

4. 더 나은 오류 경계:

createRoot는 오류 경계(Error Boundaries)에 대한 개선된 동작을 제공합니다, 기존 방식에 비해 더욱 안정적인 오류 처리가 가능해집니다.

5. 비동기 렌더링 준비

• Concurrent Mode를 완전히 활용하기 위해서는 애플리케이션의 렌더링 방식을 변경해야 할 필요가 있습니다. createRoot는 이러한 비동기 렌더링을 준비하고 최적화하는 데 필요한 API를 제공합니다.
  • 일반적인 React의 렌더링은 동기적임. 한번 렌더링을 시작하면 중단할 수 없음
    • concurrent mode를 사용할 경우, 렌더링 작업을 중단하고 더 중요한 작업을 먼저 수행 가능
      • 중요작업을 먼저 처리 후, 원래 작업으로 돌아갈 수 있음
  • 새로운 Suspense API
    • 데이터 불러오기, 코드분할 등과 같은 비동기 작업을 더 쉽게 처리가능한 API
      • 컴포넌트가 그의 의존성이 준비될 때까지 렌더링 대기시킬 수 있음