{"id":885,"date":"2026-05-20T09:52:00","date_gmt":"2026-05-20T01:52:00","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-form-mutation-10\/"},"modified":"2026-05-20T09:52:00","modified_gmt":"2026-05-20T01:52:00","slug":"nextjs-form-mutation-10","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-form-mutation-10\/","title":{"rendered":"\ud3fc\uacfc \ubba4\ud14c\uc774\uc158 \u2014 useActionState\u00b7\ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 831 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#4f46e5;--color-accent:#6366f1;--color-bg:#fafbfc;--color-bg-card:#fff;--color-text:#1a202c;--color-text-muted:#64748b;--hero-start:#1e1b4b;--hero-end:#4338ca;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#a78bfa;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#c7d2fe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#eef2ff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#4338ca;}\n.databox{background:#eef2ff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#c7d2fe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">Next.js \uad50\uc7ac \u00b7 10\ud3b8 \u00b7 \ud3fc \uc2e4\uc804<\/span>\n  <h1>\ud3fc\uacfc \ubba4\ud14c\uc774\uc158 \u2014 useActionState\u00b7\ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8<\/h1>\n  <p>9\ud3b8 Server Actions \uc704\uc5d0 \uac80\uc99d\u00b7\uc9c4\ud589 \ud45c\uc2dc\u00b7UX \ucd5c\uc801\ud654\ub97c \uc5b9\uc5b4 \uc2e4\uc804 \ud3fc \ud55c \uc138\ud2b8.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-64.jpg\" alt=\"\ud3fc \uc785\ub825\uc774 \uc11c\ubc84\ub85c \uc804\uc1a1\ub418\uace0 \ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8\uac00 \uc989\uc2dc \ubc18\uc601\ub418\ub294 \ucee8\uc149 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>9\ud3b8\uc5d0\uc11c <code>'use server'<\/code> \ud55c \uc904\ub85c \uc11c\ubc84 \ud568\uc218\ub97c \ud3fc\uc5d0\uc11c \ubd80\ub974\ub294 \ubc95\uc744 \ubd24\ub2e4. \uadf8\ub7f0\ub370 \uc9c4\uc9dc \uc0ac\uc6a9\uc790\uac00 \uc4f8 \ud3fc\uc740 \ud55c \uc904\ub85c \ub05d\ub098\uc9c0 \uc54a\ub294\ub2e4 \u2014 <strong>\uc785\ub825 \uac80\uc99d\u00b7\uc911\ubcf5 \uc81c\ucd9c \ubc29\uc9c0\u00b7\uc9c4\ud589 \ud45c\uc2dc\u00b7\ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8\u00b7\uc11c\ubc84 \uc5d0\ub7ec \ud45c\uc2dc<\/strong> \uae4c\uc9c0 \ub2e4 \ucc59\uaca8\uc57c \ud55c\ub2e4.<\/p>\n\n<p>\uc774\ubc88 \ud3b8\uc740 \uadf8 \ub2e4\uc12f\uc744 \ud55c \ud3fc\uc5d0 \ubb36\ub294\ub2e4. React 19 \uc758 <code>useActionState<\/code>\u00b7<code>useOptimistic<\/code>\u00b7<code>useFormStatus<\/code> \uc138 \ud6c5\uc774 \uc774\ub97c \uac70\uc758 \uc790\ub3d9\ud654\ud55c\ub2e4.<\/p>\n\n<h2>1. useActionState \u2014 \ud3fc \uacb0\uacfc \uc0c1\ud0dc \uad00\ub9ac<\/h2>\n\n<p>Server Action \uc758 \uacb0\uacfc(\uc131\uacf5\/\uc2e4\ud328\u00b7\uba54\uc2dc\uc9c0)\ub97c \ucef4\ud3ec\ub10c\ud2b8 \uc0c1\ud0dc\ub85c \ubc1b\uc544 \ud654\uba74\uc5d0 \ubc18\uc601\ud55c\ub2e4. 9\ud3b8\uc5d0\uc11c \uc7a0\uae50 \ubd24\uc9c0\ub9cc \uc774\ubc88\uc5d4 \uac80\uc99d\uacfc \uc5d0\ub7ec\uae4c\uc9c0 \ubb36\uc5b4\uc11c.<\/p>\n\n<div class=\"code-block\">\/\/ app\/posts\/new\/actions.ts\n&#8216;use server&#8217;;\nimport { z } from &#8216;zod&#8217;;\nimport { revalidatePath } from &#8216;next\/cache&#8217;;\n\nconst Schema = z.object({\n  title: z.string().min(2, &#8216;\uc81c\ubaa9\uc740 2\uc790 \uc774\uc0c1&#8217;).max(100),\n  body:  z.string().min(10, &#8216;\ubcf8\ubb38\uc740 10\uc790 \uc774\uc0c1&#8217;),\n});\n\nexport async function createPost(prev: any, formData: FormData) {\n  const parsed = Schema.safeParse({\n    title: formData.get(&#8216;title&#8217;),\n    body:  formData.get(&#8216;body&#8217;),\n  });\n  if (!parsed.success) {\n    return { ok: false, errors: parsed.error.flatten().fieldErrors };\n  }\n  await db.posts.create(parsed.data);\n  revalidatePath(&#8216;\/posts&#8217;);\n  return { ok: true, errors: {} };\n}<\/div>\n\n<div class=\"code-block\">\/\/ app\/posts\/new\/post-form.tsx\n&#8216;use client&#8217;;\nimport { useActionState } from &#8216;react&#8217;;\nimport { createPost } from &#8216;.\/actions&#8217;;\n\nconst initial = { ok: false, errors: {} as Record&lt;string,string[]&gt; };\n\nexport default function PostForm() {\n  const [state, formAction, pending] = useActionState(createPost, initial);\n  return (\n    &lt;form action={formAction}&gt;\n      &lt;input name=&#8221;title&#8221; placeholder=&#8221;\uc81c\ubaa9&#8221; \/&gt;\n      {state.errors.title?.[0] &#038;&#038; &lt;p className=&#8221;error&#8221;&gt;{state.errors.title[0]}&lt;\/p&gt;}\n\n      &lt;textarea name=&#8221;body&#8221; placeholder=&#8221;\ubcf8\ubb38&#8221; \/&gt;\n      {state.errors.body?.[0] &#038;&#038; &lt;p className=&#8221;error&#8221;&gt;{state.errors.body[0]}&lt;\/p&gt;}\n\n      &lt;button disabled={pending}&gt;{pending ? &#8216;\uc800\uc7a5 \uc911\u2026&#8217; : &#8216;\uac8c\uc2dc&#8217;}&lt;\/button&gt;\n      {state.ok &#038;&#038; &lt;p className=&#8221;ok&#8221;&gt;\uc800\uc7a5 \uc644\ub8cc!&lt;\/p&gt;}\n    &lt;\/form&gt;\n  );\n}<\/div>\n\n<p><strong>Zod \uac00 \ud55c \uc77c \ub450 \uac00\uc9c0<\/strong> \u2014 \uc785\ub825 \ub370\uc774\ud130\ub97c \ud0c0\uc785 \uc548\uc804\ud558\uac8c \ud30c\uc2f1 + \uc5d0\ub7ec \uba54\uc2dc\uc9c0 \ud55c\uad6d\uc5b4\ub85c \uc9c1\uc811 \uc791\uc131. <code>parsed.error.flatten().fieldErrors<\/code> \ub294 <code>{ title: ['\uc81c\ubaa9\uc740 2\uc790 \uc774\uc0c1'] }<\/code> \uac19\uc740 \ud615\ud0dc\ub85c \ub5a8\uc5b4\uc9c4\ub2e4.<\/p>\n\n<h2>2. useFormStatus \u2014 \uc790\uc2dd \ubc84\ud2bc\uc774 \uc9c4\ud589 \uc0c1\ud0dc \ubc1b\uae30<\/h2>\n\n<p><code>pending<\/code> \uc744 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uae4c\uc9c0 props \ub85c \ub0b4\ub824\ubcf4\ub0b4\uae30 \uadc0\ucc2e\ub2e4. <code>useFormStatus<\/code> \uac00 \uadf8\uac78 \ucee8\ud14d\uc2a4\ud2b8\ub85c \uc790\ub3d9 \uc804\ub2ec.<\/p>\n\n<div class=\"code-block\">\/\/ SubmitButton.tsx\n&#8216;use client&#8217;;\nimport { useFormStatus } from &#8216;react-dom&#8217;;\n\nexport function SubmitButton({ label = &#8216;\uc800\uc7a5&#8217; }) {\n  const { pending } = useFormStatus();\n  return (\n    &lt;button disabled={pending}&gt;\n      {pending ? &#8216;\uc800\uc7a5 \uc911\u2026&#8217; : label}\n    &lt;\/button&gt;\n  );\n}\n\n\/\/ \ud3fc \uc548\uc5d0\uc11c\n&lt;form action={formAction}&gt;\n  \u2026\n  &lt;SubmitButton \/&gt;\n&lt;\/form&gt;<\/div>\n\n<p>SubmitButton \uc774 \ubd80\ubaa8 \ud3fc\uc758 \uc9c4\ud589 \uc0c1\ud0dc\ub97c \uc54c\uc544\uc11c \uc77d\ub294\ub2e4. \uac19\uc740 \ubc84\ud2bc\uc744 \uc5ec\ub7ec \ud3fc\uc5d0 \uc7ac\uc0ac\uc6a9\ud574\ub3c4 \uac01\uc790 \uc790\uae30 \ud3fc\uc758 \uc0c1\ud0dc\ub97c \ubcf8\ub2e4. \ub9c8\ubc95.<\/p>\n\n<div class=\"databox\">\n<strong>\uc8fc\uc758 \u2014 useFormStatus \uc704\uce58<\/strong> \u2014 \ubc18\ub4dc\uc2dc <code>&lt;form&gt;<\/code> <strong>\uc548\ucabd<\/strong> \ucef4\ud3ec\ub10c\ud2b8\uc5ec\uc57c \uc791\ub3d9. \ud3fc \uc790\uccb4\uc5d0\uc120 \uc548 \ub428. SubmitButton \ucc98\ub7fc \ud3fc \uc790\uc2dd\uc73c\ub85c \ubd84\ub9ac\ud558\ub294 \uac8c \ud45c\uc900 \ud328\ud134.\n<\/div>\n\n<h2>3. useOptimistic \u2014 \uc989\uc2dc UI \uc5c5\ub370\uc774\ud2b8<\/h2>\n\n<p>&#8220;\uc88b\uc544\uc694&#8221; \ubc84\ud2bc\ucc98\ub7fc \ube60\ub978 \ubc18\uc751\uc774 \uc911\uc694\ud55c \uacf3. \uc11c\ubc84 \uc751\ub2f5 \uae30\ub2e4\ub9ac\uc9c0 \ub9d0\uace0 <strong>\uc77c\ub2e8 \ud654\uba74\uc744 \uba3c\uc800<\/strong> \ubc14\uafbc\ub2e4.<\/p>\n\n<div class=\"code-block\">&#8216;use client&#8217;;\nimport { useOptimistic } from &#8216;react&#8217;;\nimport { likePost } from &#8216;.\/actions&#8217;;\n\nexport default function LikeButton({ post }) {\n  const [optimisticLikes, addOptimisticLike] = useOptimistic(\n    post.likes,\n    (current, increment: number) =&gt; current + increment\n  );\n\n  async function handleLike() {\n    addOptimisticLike(1);          \/\/ \u2460 UI \uba3c\uc800 +1\n    await likePost(post.id);        \/\/ \u2461 \uc11c\ubc84\uc5d0 \uc2e4\uc81c \ubc18\uc601\n  }\n\n  return (\n    &lt;button onClick={handleLike}&gt;\n      \u2764 {optimisticLikes}\n    &lt;\/button&gt;\n  );\n}<\/div>\n\n<p>\ubc84\ud2bc\uc744 \ub204\ub974\uba74 \uce74\uc6b4\ud2b8\uac00 <strong>\uc989\uc2dc<\/strong> +1 \uc73c\ub85c \ubc14\ub010\ub2e4. \uc11c\ubc84 \uc751\ub2f5\uc774 \ub3c4\ucc29\ud558\uba74 \uc9c4\uc9dc \uac12\uc73c\ub85c \uad50\uccb4. \uc11c\ubc84\uac00 \uc2e4\ud328\ud558\uba74 React \uac00 \uc790\ub3d9\uc73c\ub85c \uc6d0\ub798 \uac12\uc73c\ub85c \ub864\ubc31. \uc0ac\uc6a9\uc790 \uc785\uc7a5\uc5d0\uc120 \ud56d\uc0c1 \ube60\ub974\ub2e4.<\/p>\n\n<div class=\"warnbox\">\n<strong>\uc5b8\uc81c \uc4f0\ub098<\/strong> \u2014 \uc2e4\ud328 \ud655\ub960\uc774 \ub0ae\uace0, \uc7a0\uc2dc \uc798\ubabb\ub41c \uac12\uc744 \ubcf4\uc5ec\uc918\ub3c4 \ud070 \ubb38\uc81c \uc5c6\ub294 \uc561\uc158. \uc88b\uc544\uc694\u00b7\ubd81\ub9c8\ud06c\u00b7\uac04\ub2e8\ud55c \ud1a0\uae00\uc5d0 \uc801\ud569. \uacb0\uc81c\u00b7\uc0ad\uc81c\u00b7\uc911\uc694 \ub370\uc774\ud130\ub294 \uc808\ub300 \ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8 \uae08\uc9c0 \u2014 \uc2e4\ud328 \uc2dc \uc0ac\uc6a9\uc790\uac00 \ud63c\ub780.\n<\/div>\n\n<h2>4. Progressive Enhancement \u2014 JS \uaebc\uc838\ub3c4 \ub3d9\uc791<\/h2>\n\n<p>Server Actions \uc758 \uc228\uc740 \uc7a5\uc810. <code>&lt;form action={fn}&gt;<\/code> \uc740 <strong>JS \uac00 \uaebc\uc9c4 \ube0c\ub77c\uc6b0\uc800<\/strong>\uc5d0\uc11c\ub3c4 \ud45c\uc900 HTML \ud3fc \uc81c\ucd9c\ub85c \ub3d9\uc791\ud55c\ub2e4.<\/p>\n\n<div class=\"code-block\">\/\/ \uc774 \ucf54\ub4dc\ub294 JS \uc5c6\uc774\ub3c4 \ud3fc \uc81c\ucd9c + \ud398\uc774\uc9c0 \uc0c8\ub85c\uace0\uce68\n&lt;form action={createPost}&gt;\n  &lt;input name=&#8221;title&#8221; \/&gt;\n  &lt;button&gt;\uac8c\uc2dc&lt;\/button&gt;\n&lt;\/form&gt;<\/div>\n\n<p>JS \uac00 \ucf1c\uc838 \uc788\uc73c\uba74 React \uac00 \uac00\ub85c\ucc44\uc11c \ud398\uc774\uc9c0 \uc0c8\ub85c\uace0\uce68 \uc5c6\uc774 \ubd80\ub4dc\ub7fd\uac8c \ucc98\ub9ac, JS \uac00 \uaebc\uc838 \uc788\uc73c\uba74 \ud45c\uc900 \ud3fc \uc81c\ucd9c\ub85c \ud3f4\ubc31. <strong>\uac19\uc740 \ucf54\ub4dc\ub85c \ub450 \uacbd\uc6b0 \ubaa8\ub450 \ub3d9\uc791<\/strong>. \uc61b React \uc5d0\uc120 \ubd88\uac00\ub2a5\ud588\ub358 \uc77c.<\/p>\n\n<h2>5. \ud754\ud55c \ud328\ud134 5\uac00\uc9c0<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\ud328\ud134<\/th><th>\ub3c4\uad6c<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>\uc785\ub825 \uac80\uc99d + \uc5d0\ub7ec \ud45c\uc2dc<\/td><td data-label=\"\ub3c4\uad6c\">Zod + useActionState<\/td><\/tr>\n<tr><td>\uc9c4\ud589 \ud45c\uc2dc (\uc800\uc7a5 \uc911\u2026)<\/td><td data-label=\"\ub3c4\uad6c\">useFormStatus \ub610\ub294 pending<\/td><\/tr>\n<tr><td>\uc88b\uc544\uc694 \uc989\uc2dc \ubc18\uc601<\/td><td data-label=\"\ub3c4\uad6c\">useOptimistic<\/td><\/tr>\n<tr><td>\uc800\uc7a5 \ud6c4 \ub2e4\ub978 \ud398\uc774\uc9c0\ub85c<\/td><td data-label=\"\ub3c4\uad6c\">redirect() in Server Action<\/td><\/tr>\n<tr><td>\uc800\uc7a5 \ud6c4 \ubaa9\ub85d \uac31\uc2e0<\/td><td data-label=\"\ub3c4\uad6c\">revalidatePath(&#8216;\/posts&#8217;)<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\uc774 5\uac00\uc9c0\ub97c \ud55c \ubc88\uc529 \uc870\ud569\ud55c \ud3fc\uc774 \uc2e4\uc804 \ud45c\uc900. \uc61b React \uc5d0\uc120 <code>react-hook-form + axios + react-query + toast<\/code> 4\uac1c \ub77c\uc774\ube0c\ub7ec\ub9ac \uc870\ud569\uc774 \ud544\uc694\ud588\ub358 \uc77c\uc774 \u2014 Next 14\/15 \uc5d0\uc120 \ud45c\uc900 \ud6c5 3\uac1c\ub85c \ud574\uacb0\ub41c\ub2e4.<\/p>\n\n<h3>\uc694\uc57d \u2014 10\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc815\ub9ac. \ud3fc mutation \uc758 \ub2e4\uc12f \ucd95 \u2014 <strong>useActionState<\/strong>(\uacb0\uacfc\u00b7\uc5d0\ub7ec), <strong>useFormStatus<\/strong>(\uc790\uc2dd \ubc84\ud2bc \uc9c4\ud589 \ud45c\uc2dc), <strong>useOptimistic<\/strong>(\uc989\uc2dc UI \ubc18\uc601), <strong>Zod<\/strong>(\uc11c\ubc84 \uac80\uc99d), <strong>revalidatePath\/redirect<\/strong>(\ud6c4\ucc98\ub9ac). \uac19\uc740 \ucf54\ub4dc\uac00 JS \uaebc\uc9c4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub3c4 \ud45c\uc900 \ud3fc\uc73c\ub85c \ub3d9\uc791 \u2014 Progressive Enhancement. \ub2e4\uc74c \ud3b8\uc5d0\uc11c \ub85c\ub529\uacfc \uc5d0\ub7ec UI \ub97c \ubd84\ub9ac\ud558\ub294 <strong>loading.tsx\u00b7error.tsx<\/strong>.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 loading.tsx\u00b7error.tsx<\/h3>\n<p>\ud2b9\uc218 \ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\ub294 \ub85c\ub529\u00b7\uc5d0\ub7ec UI. 11\ud3b8.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\n\uc2dc\ub9ac\uc988 \u00b7 <a href=\"https:\/\/junai.ai\/blog\/category\/nextjs\/\">\uc27d\uac8c \ubc30\uc6b0\ub294 Next.js<\/a> \u00b7 \uc774\uc804: <a href=\"https:\/\/junai.ai\/blog\/nextjs-server-actions-9\/\">Ch.9 Server Actions<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>useActionState\u00b7useOptimistic\u00b7useFormStatus\u00b7Zod \uac80\uc99d. Next.js \ud3fc \ubba4\ud14c\uc774\uc158 \uc2e4\uc804 \ud328\ud134. \uad50\uc7ac 10\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":831,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/885","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=885"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/885\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/831"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}