Legacy Mode

ReactDOM.render(<App />, rootNode)

• React의 이전 버전에서 사용되는 모드입니다.
• 렌더링 작업은 단일 스레드에서 동기적으로 처리됩니다.
• 컴포넌트의 업데이트 작업은 한 번에 하나씩 처리되며, 다른 작업은 중단됩니다.
• 컴포넌트의 업데이트가 오래 걸릴 경우, 애플리케이션의 응답성이 저하될 수 있습니다.

Concurrent Mode

ReactDOM.createRoot(rootNode).render(<App />)

• React 16 버전 이후에 도입된 모드입니다.
• 렌더링 작업은 병렬적으로 처리되며, 비동기적으로 진행될 수 있습니다.
• 컴포넌트의 업데이트 작업은 우선순위에 따라 세분화되고 조정됩니다.
• 사용자 경험을 향상시키기 위해 중요한 작업에 우선순위를 부여하고, 덜 중요한 작업은 일시 중단하거나 취소할 수 있습니다.
• React는 변경 사항을 최적화하여 부분적인 업데이트를 수행하고, 사용자에게 빠른 응답성을 제공합니다.
• *Suspense 컴포넌트를 통해 데이터 로딩 및 코드 분할을 처리할 수 있습니다.*

Concurrent Mode는 Legacy Mode보다 더 높은 응답성과 성능을 제공하기 위해 도입된 기능입니다. 병렬 처리, 우선순위 조정, 일시 중단 및 취소와 같은 기능을 통해 사용자 경험을 개선할 수 있습니다. 그러나 Concurrent Mode는 몇 가지 주의사항과 API 변경 사항을 동반하므로, 기존의 React 애플리케이션으 업그레이드할 때에는 주의가 필요합니다.