React Conf 2021: React 18, 서버 컴포넌트, 그리고 개발자 도구까지!

React 18 출시와 동시성 기능 도입을 통해 React의 미래 비전 제시

서버 사이드 렌더링 성능 개선을 위한 Suspense 활용 방법 소개

React DevTools 팀 발표 및 새로운 Timeline Profiler를 통한 디버깅 지원

React 18의 핵심: 동시성 기능

React 18은 동시성 렌더러를 도입하여 사용자 인터랙션을 개선한다. 구체적으로 Suspense를 활용하여 UI를 더 작은 단위로 나누어 렌더링할 수 있다. 따라서 사용자 경험 향상과 초기 렌더링 속도 개선을 동시에 달성하며, React 18 RC를 통해 미리 경험해 볼 수 있다.

서버 컴포넌트와 Suspense의 시너지

React 18은 서버 사이드 렌더링 성능을 향상시키기 위해 Suspense를 적극 활용한다. 스트리밍 서버 렌더링을 통해 서버에서 HTML을 생성하고, 독립적인 단위로 스트리밍하여 사용자에게 빠르게 콘텐츠를 제공한다. 반면, 서버 컴포넌트의 복잡성을 고려하여 데이터 페칭 전략을 신중하게 설계해야 한다.

React 개발자 도구의 발전

React 18 출시에 맞춰 React DevTools 팀이 발표되었고, 새로운 Timeline Profiler가 공개되었다. Timeline Profiler는 개발자가 성능 병목 현상을 쉽게 파악하고, React 앱 디버깅을 효율적으로 수행하도록 돕는다. 따라서 개발 생산성 향상에 기여하며, React 생태계 발전에 중요한 역할을 한다.