React v19

✅ useActionState: ReactDOM.useFormState → 이름 변경 + 기능 강화

useActionState는 서버 액션(server actions)을 처리할 수 있도록 설계된 훅입니다.

원래는 ReactDOM.useFormState라는 이름이었으나 React v19에서 useActionState로 변경되었습니다.

tsx

복사편집

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

이 훅은 클라이언트에서 폼 액션을 처리할 때, 서버와의 인터랙션 상태(로딩, 성공, 실패 등)를 관리해주는 역할을 합니다. 중요한 점은 action이 성공하면 폼을 자동으로 reset한다는 것입니다. 더 이상 e.preventDefault() → fetch → 상태 업데이트 등의 반복 작업을 수동으로 작성할 필요가 없습니다.

---

🆚 기존의 react-query와 어떤 차이가 있을까?

항목	useAction	react-query
목적	주로 폼 액션 처리와 서버와의 인터랙션	서버에서 데이터를 읽어오기(fetch)
리렌더링	useActionState는 폼 제출 후 상태를 자동으로 관리	react-query는 주로 데이터 캐싱 중심
동작방식	서버 액션 기반 - 서버와 연결된 함수 실행	클라이언트 중심 - fetch, mutation
reset 기능	성공 시 자동으로 form reset	수동으로 처리해야 함
SSR/Fullstack 최적화	✅ (서버 액션과 연동됨)	❌ (클라이언트 중심 도구)

정리하자면, useActionState는 폼 중심 서버 액션 처리에 특화되어 있고, react-query는 REST/GraphQL 기반의 데이터 패칭에 특화되어 있습니다.

용도가 아예 다릅니다.

---

🆕 useFormStatus: 더 이상 props drilling은 없다

기존 문제점

폼의 isSubmitting, isPending 같은 상태를 버튼이나 다른 컴포넌트에서 알고 싶을 때, props를 계속 전달하거나, Context를 만들어야 했습니다.

새 기능

이제는 useFormStatus 훅을 통해 폼 안의 어떤 위치에서도 현재 폼의 상태를 가져올 수 있습니다.

tsx

복사편집

"use client"; import { useFormStatus } from "react-dom"; function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }

React 내부에서 상태 공유를 제공하기 때문에 구조가 깔끔해지고 코드 작성이 단순해집니다.

---

🔄 useOptimistic: 낙관적 UI 업데이트가 더 쉬워졌다

서버 액션을 기다리는 동안, 낙관적 UI(optimistic UI)를 보여주고 싶을 때 사용하는 훅입니다. 예를 들어 댓글을 작성하면, 서버 응답 전에 댓글이 먼저 화면에 보이게 할 수 있습니다.

tsx

복사편집

const [optimisticComments, addOptimisticComment] = useOptimistic(comments);

기존에는 useState와 react-query의 onMutate, rollback, onError 등을 조합해서 써야 했지만, 이제는 간단하게 useOptimistic만으로 구현 가능합니다.

---

💡 ref prop: forwardRef 없이도 ref 전달이 가능해졌다

React v19에서는 ref를 props로 직접 전달할 수 있는 기능이 도입됩니다.
기존에는 컴포넌트 간 ref 전달을 위해 반드시 forwardRef를 사용해야 했지만, 이제는 단순히 ref를 prop으로 넘겨도 됩니다.

tsx

복사편집

<MyComponent ref={myRef} />

이는 React가 내부적으로 ref를 특별 취급하지 않고, 일반 props처럼 다루기 시작했다는 뜻이며, 코드 구조가 더 단순해지고 컴포넌트 재사용성이 향상됩니다.

---

📐 React는 Fullstack으로 진화 중

React 19에서 소개된 기능들은 단순히 UI 컴포넌트를 더 쉽게 만들자는 수준이 아니라, 서버와 클라이언트의 경계를 허물고, 전체적인 Fullstack 아키텍처를 React 내부로 흡수하려는 의도가 강하게 드러납니다.

변화	의미
useActionState	서버 액션 관리 (Mutations)
useFormStatus	Form 상태 관리의 단순화
useOptimistic	서버-클라이언트 UI 동기화의 개선
ref prop 개선	컴포넌트 재사용과 확장성 향상

---

마무리하며

React 19는 기존의 라이브러리 생태계에 의존하던 많은 기능들을 React 내부로 가져오면서, 더 예측 가능하고 일관된 개발 방식을 제안하고 있습니다.
Fullstack React가 가능해지면서 Next.js, Server Actions, Server Components와의 결합력도 훨씬 강해졌습니다.

앞으로 React를 단순한 View 라이브러리로 보는 시선은 점점 줄어들 것으로 보이며,
React 생태계의 변화에 민감하게 반응하는 것이 중요해질 것입니다.