React 19 Compiler와 useActionState 도입 후기

배경

사내 어드민 시스템을 React 18에서 19로 마이그레이션했다. 주요 목적은 React Compiler 적용과 useActionState를 통한 폼 처리 개선이었다.

React Compiler 적용

기존 코드베이스에는 useMemo, useCallback이 많았다. Compiler를 켜면 이런 수동 최적화가 불필요해진다고 했다.

// Before
const filteredData = useMemo(() => 
  data.filter(item => item.status === filter),
  [data, filter]
);

// After - 그냥 작성
const filteredData = data.filter(item => item.status === filter);

Compiler가 자동으로 메모이제이션 포인트를 찾아준다. 번들 크기는 약 3% 증가했지만, 재렌더링은 확실히 줄었다.

useActionState로 폼 개선

서버 액션과 함께 사용하니 로딩/에러 상태 관리가 단순해졌다.

const [state, formAction, isPending] = useActionState(updateUser, initialState);

return (
  <form action={formAction}>
    <input name="username" />
    {state.error && <p>{state.error}</p>}
    <button disabled={isPending}>저장</button>
  </form>
);

기존에는 useState + try-catch + loading flag 조합이었는데, 이제 한 줄로 처리된다.

마이그레이션 이슈

• 일부 서드파티 라이브러리가 아직 React 19 호환 안됨
• ref 전달 방식이 변경되어 forwardRef 제거 작업 필요
• StrictMode가 더 엄격해져서 경고가 증가

결론

Compiler 덕분에 불필요한 최적화 코드를 제거할 수 있었다. useActionState는 Next.js App Router와 궁합이 좋았다. 안정화까지 시간이 더 필요하지만, 방향성은 마음에 든다.