React 19 기능: Actions, use(), 새로운 폼 처리 모델

React 19는 3년 만의 첫 메이저 React 버전입니다. 가장 흔한 고통 지점인 폼 상태, 비동기 뮤테이션, ref 전달, 컨텍스트 소비를 단순화하는 변경 사항을 제공합니다. 무엇이 새롭고 무엇을 대체하는지 알아봅니다.

Actions: 비동기 뮤테이션의 새 패턴

Actions는 폼 제출과 뮤테이션을 처리하는 비동기 함수입니다. React 19는 Action의 라이프사이클을 자동으로 관리하는 훅을 제공합니다.

Actions가 대체하는 것:

• isLoading, isError, data에 대한 수동 useState
• 상태 업데이트가 있는 수동 try/catch
• 수동 e.preventDefault()

useActionState

useActionState 훅은 액션 함수를 래핑하고 대기 상태와 마지막 결과를 제공합니다:

const [state, action, isPending] = useActionState(actionFn, initialState);

useOptimistic

useOptimistic은 낙관적 UI 업데이트를 가능하게 합니다 — 실제 요청이 진행되는 동안 예상 결과를 즉시 표시합니다. 액션이 해결(또는 거부)되면 React는 낙관적 상태를 실제 데이터와 자동으로 조정합니다.

use() 훅

use() 훅은 렌더 내에서 컨텍스트나 Promise의 값을 읽습니다. 훅과 달리 조건부로 호출할 수 있습니다. Promise를 읽으면(해결될 때까지 일시 중지) useContext를 대체하여 컨텍스트를 읽을 수도 있습니다.

prop으로서의 ref

React 19는 forwardRef의 필요성을 제거합니다. 이제 ref를 직접 prop으로 전달할 수 있습니다:

function Input({ ref, ...props }) { return <input ref={ref} {...props} />; }

JSX 요소로서의 Context

React 19는 .Provider 접미사 없이 컨텍스트를 JSX 요소로 직접 사용할 수 있게 합니다:

// React 19 <ThemeContext value={theme}>{children}</ThemeContext>

마이그레이션

React 19는 일부 오래 전에 폐기된 API를 제거합니다. React 19 코드모드를 실행하세요:

npx codemod@latest react/19/migration-recipe