React 19 주요 특징과 변화

1. React Server Components(RSC) 공식 지원

• 클라이언트에서 불필요한 JavaScript 번들 크기 감소
• 서버에서 데이터를 직접 가져와 클라이언트로 전송
• 클라이언트-서버 간의 렌더링 효율 최적화

2. 새로운 Suspense 동작

• 서버 컴포넌트와 함께 자연스럽게 데이터 로딩 가능
• use() 훅을 활용한 Suspense 지원 강화
• 데이터 패칭 시 사용자 경험 향상

const data = await fetchData();
const component = (
  <Suspense fallback={<Loading />}>
    <SomeComponent data={data} />
  </Suspense>
);

3. Actions API: 서버와의 상호작용 개선

• 폼 제출 및 서버와의 데이터 상호작용 간소화
• 직접적인 서버 액션 호출 가능
• Next.js와 같은 프레임워크와 자연스럽게 연동

"use server";
export async function submitForm(data) {
  "use server";
  console.log("폼 데이터 제출:", data);
}

4. useOptimistic: 비동기 상태 업데이트 최적화

const [optimisticLikes, addLike] = useOptimistic(0, (prev) => prev + 1);

<button onClick={() => addLike()}>👍 {optimisticLikes}</button>

• 사용자 경험 향상 (즉각적인 UI 피드백 제공)
• 서버 응답과 무관하게 UI 업데이트 가능

5. 새로운 React Compiler 도입

• React 내부적으로 불필요한 렌더링을 자동으로 최적화
• 개발자가 useMemo()나 useCallback()을 과도하게 사용하지 않아도 됨
• 코드 유지보수성이 향상됨

6. 새로운 렌더링 모델 도입

• 서버와 클라이언트 간의 데이터 렌더링 방식 최적화
• 불필요한 리렌더링 방지
• React 개발자의 생산성 향상

React 19 마이그레이션 가이드

1. package.json에서 React 및 React DOM 버전을 업데이트
2. 기존 Suspense 및 데이터 패칭 로직을 React 19 스타일로 변경
3. useOptimistic() 및 Actions API 활용하여 성능 최적화
4. React Server Components(RSC) 도입 고려

npm install react@latest react-dom@latest

✨ 결론

참고자료

• https://ko.react.dev/blog/2024/12/05/react-19
• https://react.dev/learn