29:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 2a:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 2b:I[390236,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostSummary"] 2f:I[948688,["/_next/static/immutable/chunks/1opgw09b2rf0r.js"],"IconMark"] 28:T5ba,{"@context":"https://schema.org","@type":"BlogPosting","headline":"React 19 새 훅 useActionState와 use 써본 후기: react-hook-form과 뭐가 다를까?","description":"React 19가 정식 출시되면서, 개발자 경험(Developer Experience, DX) 측면에서 많은 변화가 생겼습니다.특히 이번 버전에서는 useActionState와 use 훅이 도입되어, 기존 React 18에서보다 서버 액션과 비동기 데이터 처리가 훨씬...","image":["https://3d-blog.vercel.app/blog/category/react/post/react-19-%EC%83%88-%ED%9B%85-useactionstate%EC%99%80-use-%EC%8D%A8%EB%B3%B8-%ED%9B%84%EA%B8%B0-react-hook-form%EA%B3%BC-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2025-09-27T11:35:06.169Z","dateModified":"2026-08-17T08:23:05.295Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/react/post/react-19-%EC%83%88-%ED%9B%85-useactionstate%EC%99%80-use-%EC%8D%A8%EB%B3%B8-%ED%9B%84%EA%B8%B0-react-hook-form%EA%B3%BC-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C"},"url":"https://3d-blog.vercel.app/blog/category/react/post/react-19-%EC%83%88-%ED%9B%85-useactionstate%EC%99%80-use-%EC%8D%A8%EB%B3%B8-%ED%9B%84%EA%B8%B0-react-hook-form%EA%B3%BC-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C"}2c:T2894,

React 19가 정식 출시되면서, 개발자 경험(Developer Experience, DX) 측면에서 많은 변화가 생겼습니다.

특히 이번 버전에서는 useActionState와 use 훅이 도입되어, 기존 React 18에서보다 서버 액션과 비동기 데이터 처리가 훨씬 간단해졌습니다.

이번 글에서는 React 18과 React 19의 주요 차이점을 비교하고, useActionState를 직접 써본 경험과 react-hook-form과의 차이점까지 정리해보겠습니다.

React 18 vs React 19: 무엇이 달라졌나?

구분	React 18	React 19
렌더링	Concurrent Rendering, Automatic Batching	동일 + 개선
Suspense	실험적 데이터 Fetching 지원	공식 지원 강화
폼 상태 관리	직접 `useState` 또는 외부 라이브러리	`useActionState` 도입, 서버 액션과 연계
비동기 데이터	`useEffect` + `useState`	`use` 훅으로 동기처럼 사용 가능

React 18이 렌더링 모델 개선에 집중했다면, React 19는 개발자가 상태와 서버 액션을 더 직관적으로 다루는 DX 개선이 중심입니다.

`useActionState`: 폼/액션 상태를 단순화

기존 방식 (React 18)

const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);

async function handleSubmit(e: React.FormEvent) {
  e.preventDefault();
  setLoading(true);
  setError(null);

  try {
    await login();
  } catch {
    setError("로그인 실패");
  } finally {
    setLoading(false);
  }
}

상태(loading, error)를 직접 관리해야 하고
try/catch/finally 블록이 반복되어 보일러플레이트가 많음

React 19 방식: `useActionState`

import { useActionState } from "react";

async function login(prevState: any, formData: FormData) {
  // 서버 액션 로직
  return { success: true };
}

function LoginForm() {
  const [state, action] = useActionState(login, {});

  return (
    <form action={action}>
      <input type="email" name="email" />
      <input type="password" name="password" />
      <button disabled={state.pending}>
        {state.pending ? "로그인 중..." : "로그인"}
      </button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

pending, error, success 상태를 자동 관리
서버 액션과 자연스럽게 연계
불필요한 상태 변수를 줄여 코드 가독성 향상

직접 사용해본 후기

서버 액션과 상태 관리가 자연슬버게 연결되어 로딩/성공/실패 처리가 간단함
중복 코드 감소로 가독성이 좋아짐
다만 복잡한 폼 필드 관리와 validation은 여전히 react-hook-form 이 필요

react-hook-form과의 차이

import { useForm } from "react-hook-form";

function HookForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email", { required: "필수 입력" })} />
      {errors.email && <p>{errors.email.message}</p>}
      <input type="password" {...register("password")} />
      <button type="submit">Login</button>
    </form>
  );
}

useActionState : 서버 액션과 결합, 단순 폼/액션 처리에 좋음
react-hook-form : 클라이언트 상태, validation, 대규모 폼에 적합

즉, React 19에서 useActionState 가 나왔다고 해서 RHF가 필요 없어진 것은 아니고, 상황에 따라 적절하게 선택하면 될 거 같습니다.

use 훅: 비동기를 동기처럼

import { use } from "react";

async function fetchUser(id: string) {
  const res = await fetch(`/api/user/${id}`);
  return res.json();
}

function UserProfile({ userId }: { userId: string }) {
  const user = use(fetchUser(userId)); // Suspense와 함께 사용 가능
  return <h1>{user.name}</h1>;
}

Promise를 컴포넌트 렌더링 단계에서 동기처럼 사용 가능
Suspense와 결합하면 로딩 UI 처리도 자연스럽게 가능

결론

단순한 폼 > useActionState 추천
복잡한 validation, 다중 필드, 퍼포먼스 최적화 > react-hook-form 여전히 필요
use 훅과 함께 사용하면 데이터 fetching과 렌더링 로직이 깔끔해짐

20:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$28"}}],["$","$22",null,{"fallback":null,"children":["$","$L29",null,{"postId":12,"slug":"react-19-새-훅-useactionstate와-use-써본-후기-react-hook-form과-뭐가-다를까","categorySlug":"react"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L2a",null,{"href":"/blog/category/react"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"React 19 새 훅 useActionState와 use 써본 후기: react-hook-form과 뭐가 다를까?"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2025-09-27"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"React"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$22",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L2b",null,{"post":{"id":12,"title":"React 19 새 훅 useActionState와 use 써본 후기: react-hook-form과 뭐가 다를까?","content":"$2c","updatedAt":"$D2026-08-17T08:23:05.295Z"}}]]}]}],"$L2d"]}],"$L2e"]}]] 23:null 27:[["$","title","0",{"children":"React 19 새 훅 useActionState와 use 써본 후기: react-hook-form과 뭐가 다를까?"}],["$","meta","1",{"name":"description","content":"React 19가 정식 출시되면서, 개발자 경험(Developer Experience, DX) 측면에서 많은 변화가 생겼습니다.특히 이번 버전에서는 useActionState와 use 훅이 도입되어, 기존 React 18에서보다 서버 액션과 비동기 데이터 처리가 훨씬..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/react/post/react-19-%EC%83%88-%ED%9B%85-useactionstate%EC%99%80-use-%EC%8D%A8%EB%B3%B8-%ED%9B%84%EA%B8%B0-react-hook-form%EA%B3%BC-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"React 19 새 훅 useActionState와 use 써본 후기: react-hook-form과 뭐가 다를까?"}],["$","meta","10",{"property":"og:description","content":"React 19가 정식 출시되면서, 개발자 경험(Developer Experience, DX) 측면에서 많은 변화가 생겼습니다.특히 이번 버전에서는 useActionState와 use 훅이 도입되어, 기존 React 18에서보다 서버 액션과 비동기 데이터 처리가 훨씬..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/react/post/react-19-%EC%83%88-%ED%9B%85-useactionstate%EC%99%80-use-%EC%8D%A8%EB%B3%B8-%ED%9B%84%EA%B8%B0-react-hook-form%EA%B3%BC-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react-19-%EC%83%88-%ED%9B%85-useactionstate%EC%99%80-use-%EC%8D%A8%EB%B3%B8-%ED%9B%84%EA%B8%B0-react-hook-form%EA%B3%BC-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2025-09-27T11:35:06.169Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T08:23:05.295Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"React 19 새 훅 useActionState와 use 써본 후기: react-hook-form과 뭐가 다를까?"}],["$","meta","26",{"name":"twitter:description","content":"React 19가 정식 출시되면서, 개발자 경험(Developer Experience, DX) 측면에서 많은 변화가 생겼습니다.특히 이번 버전에서는 useActionState와 use 훅이 도입되어, 기존 React 18에서보다 서버 액션과 비동기 데이터 처리가 훨씬..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react-19-%EC%83%88-%ED%9B%85-useactionstate%EC%99%80-use-%EC%8D%A8%EB%B3%B8-%ED%9B%84%EA%B8%B0-react-hook-form%EA%B3%BC-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%BC%EA%B9%8C/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],["$","meta","31",{"name":"twitter:image:height","content":"630"}],["$","link","32",{"rel":"icon","href":"/favicon.ico?favicon.43c1ha936bzt6.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L2f","33",{}]]

React 19 새 훅 useActionState와 use 써본 후기: react-hook-form과 뭐가 다를까?

댓글