React 19 완전 정복 - Actions, use() Hook, 마이그레이션 가이드

React 19의 핵심 변화

React 19는 Actions, use() hook, forwardRef 제거로 개발자 경험을 크게 향상시켰습니다.

1. Actions

function UpdateProfile() {
  const [error, submitAction, isPending] = useActionState(
    async (prevState, formData) => {
      const error = await updateProfile(formData);
      if (error) return error;
      redirect('/profile');
      return null;
    }, null
  );
  return (
    <form action={submitAction}>
      <button disabled={isPending}>업데이트</button>
      {error && <p>{error}</p>}
    </form>
  );
}

2. use() Hook

import { use } from 'react';

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(c => <Comment key={c.id} comment={c} />);
}

function ThemeButton({ show }) {
  if (!show) return null;
  const theme = use(ThemeContext); // 조건부 사용 가능!
  return <button style={{ color: theme.primary }}>버튼</button>;
}

3. useOptimistic

function LikeButton({ post }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes, (current) => current + 1
  );
  async function handleLike() {
    addOptimisticLike();
    await likePost(post.id);
  }
  return <button onClick={handleLike}>좋아요 {optimisticLikes}</button>;
}

4. ref를 prop으로 직접 전달 (forwardRef 제거)

function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}
<MyInput ref={inputRef} placeholder="입력하세요" />

마이그레이션 포인트

• ReactDOM.render() 완전 제거 → createRoot() 필수
• forwardRef → 일반 ref prop으로 점진적 교체
• useEffect 클린업 타이밍 변경 확인

React 19의 Actions와 useOptimistic은 실제 프로덕션에서 즉시 활용 가능한 강력한 기능입니다.