Builder.shin

React 18 알파 버전 테스트: Concurrent Rendering 첫인상

배경

지난주 React 18 알파가 발표되면서 Concurrent Rendering이 정식으로 공개되었다. 프로덕션 적용은 아직 이르지만, 개인 프로젝트에 적용하며 주요 변경사항을 파악해봤다.

주요 변경점

1. createRoot API

기존 ReactDOM.render 대신 createRoot를 사용해야 한다.

// Before
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// After
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

2. Automatic Batching

이전에는 React 이벤트 핸들러 내부에서만 배칭이 동작했지만, 이제 setTimeout, Promise 등에서도 자동으로 배칭된다.

function handleClick() {
  fetchData().then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // 이제 한 번만 리렌더링됨
  });
}

3. Suspense SSR 개선

Selective Hydration이 추가되어 일부 컴포넌트가 로딩 중이어도 나머지를 먼저 hydrate할 수 있게 되었다.

체감 성능

실제로 체감되는 변화는 크지 않았다. 다만 복잡한 상태 업데이트가 많은 대시보드 페이지에서 인풋 입력 시 끊김이 약간 줄어든 느낌이었다. startTransition을 활용하면 더 개선될 것으로 보인다.

마이그레이션 주의사항

  • IE 지원이 완전히 제거되었다
  • renderToNodeStream이 deprecated되었다
  • 일부 써드파티 라이브러리가 아직 호환되지 않는다

당분간 프로덕션 적용은 보류하고, 정식 릴리스 후 단계적으로 도입할 계획이다.

React 18 알파 버전 테스트: Concurrent Rendering 첫인상