{"id":11463,"date":"2026-03-08T13:51:42","date_gmt":"2026-03-08T04:51:42","guid":{"rendered":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11463"},"modified":"2026-03-13T17:45:21","modified_gmt":"2026-03-13T08:45:21","slug":"%eb%aa%a8%eb%8d%98-react-%ec%8a%a4%ed%83%9d-%ec%99%84%ec%a0%84-%ec%a0%95%eb%b3%b5-zustand-tanstack-query-react-hook-form-zod-tailwind-shadcn-ui","status":"publish","type":"post","link":"https:\/\/www.skyer9.pe.kr\/wordpress\/?p=11463","title":{"rendered":"\ubaa8\ub358 React \uc2a4\ud0dd \uc644\uc804 \uc815\ubcf5: Zustand + TanStack Query + React Hook Form + Zod + Tailwind + shadcn\/ui"},"content":{"rendered":"

\ubaa8\ub358 React \uc2a4\ud0dd \uc644\uc804 \uc815\ubcf5: Zustand + TanStack Query + React Hook Form + Zod + Tailwind + shadcn\/ui<\/h1>\n
\n

\uc2e4\ubb34\uc5d0\uc11c \uac00\uc7a5 \ub9ce\uc774 \uc4f0\uc774\ub294 6\uac00\uc9c0 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub2e8\uacc4\ubcc4 \uc0d8\ud50c \ucf54\ub4dc\uc640 \ud568\uaed8 \uc124\uba85\ud569\ub2c8\ub2e4.
\n\uac01 \ub2e8\uacc4\ub9c8\ub2e4 \uc774\uc804 \ucf54\ub4dc\uc5d0 \uc0c8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ub367\ubd99\uc774\ub294 \ubc29\uc2dd\uc73c\ub85c \uc9c4\ud589\ud569\ub2c8\ub2e4.
\n\uc774 \ubb38\uc11c\ub294 Tailwind CSS v4 \uae30\uc900\uc73c\ub85c \uc791\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/strong><\/p>\n<\/blockquote>\n

0. \ud504\ub85c\uc81d\ud2b8 \uc138\ud305<\/h2>\n
npx create-next-app@latest my-app --typescript --eslint --app --no-tailwind --src-dir\ncd my-app<\/code><\/pre>\n
npm run dev<\/code><\/pre>\n
\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000<\/a> \uc73c\ub85c \uc811\uc18d\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n
1. Tailwind CSS (v4)<\/h2>\n
\uc124\uce58<\/h3>\n
npm install tailwindcss @tailwindcss\/postcss postcss<\/code><\/pre>\n
\n
v4\ub294 tailwind.config.ts<\/code> \ud30c\uc77c\uc774 \ud544\uc694 \uc5c6\uc2b5\ub2c8\ub2e4<\/strong>. \ubaa8\ub4e0 \uc124\uc815\uc740 CSS \ud30c\uc77c\uc5d0\uc11c \uc9c1\uc811 \ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
postcss.config.mjs<\/code> \ud30c\uc77c\uc744 \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\uc5d0 \uc0dd\uc131\ud569\ub2c8\ub2e4:<\/p>\n
\/\/ postcss.config.mjs\nconst config = {\n  plugins: {\n    "@tailwindcss\/postcss": {},\n  },\n};\nexport default config;<\/code><\/pre>\n
src\/app\/globals.css<\/code>\uc5d0 Tailwind\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4:<\/p>\n
@import "tailwindcss";<\/code><\/pre>\n
\n
v4\uc5d0\uc11c\ub294 @tailwind base\/components\/utilities<\/code> 3\uc904 \ub300\uc2e0 @import "tailwindcss"<\/code> \ud55c \uc904\uc774\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
\ucee4\uc2a4\ud140 \ud14c\ub9c8 \uc124\uc815<\/h3>\n
v4\uc5d0\uc11c\ub294 tailwind.config.ts<\/code> \ub300\uc2e0 CSS \ud30c\uc77c \uc548\uc758 @theme<\/code> \ube14\ub85d\uc5d0\uc11c \ub514\uc790\uc778 \ud1a0\ud070\uc744 \uc815\uc758\ud569\ub2c8\ub2e4.<\/p>\n
\/* src\/app\/globals.css *\/\n@import "tailwindcss";\n\n@theme {\n  \/* \ucee4\uc2a4\ud140 \uc0c9\uc0c1 *\/\n  --color-brand: oklch(0.62 0.19 255);\n\n  \/* \ucee4\uc2a4\ud140 \ud3f0\ud2b8 *\/\n  --font-sans: "Pretendard", sans-serif;\n\n  \/* \ucee4\uc2a4\ud140 \uac04\uaca9 *\/\n  --spacing-18: 4.5rem;\n}<\/code><\/pre>\n
@theme<\/code>\uc5d0 \uc815\uc758\ud55c \ud1a0\ud070\uc740 \uc790\ub3d9\uc73c\ub85c CSS \ubcc0\uc218\ub85c \ub178\ucd9c\ub418\uace0, bg-brand<\/code>, font-sans<\/code> \uac19\uc740 \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4\ub85c \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc0ac\uc6a9\ubc95<\/h3>\n
Tailwind \uc720\ud2f8\ub9ac\ud2f0 \ud074\ub798\uc2a4 \uc0ac\uc6a9\ubc95\uc740 v3\uc640 \ub3d9\uc77c\ud569\ub2c8\ub2e4.<\/p>\n
\/\/ src\/app\/page.tsx - Step 1: Tailwind\ub9cc \uc0ac\uc6a9\ud55c \uc0ac\uc6a9\uc790 \ud3fc UI\nexport default function Page() {\n  return (\n    <main className="min-h-screen bg-gray-50 flex items-center justify-center p-4">\n      <div className="bg-white rounded-2xl shadow-md w-full max-w-md p-8">\n        <h1 className="text-2xl font-bold text-gray-800 mb-6">\ud68c\uc6d0\uac00\uc785<\/h1>\n\n        <div className="space-y-4">\n          <div>\n            <label className="block text-sm font-medium text-gray-700 mb-1">\n              \uc774\ub984\n            <\/label>\n            <input\n              type="text"\n              placeholder="\ud64d\uae38\ub3d9"\n              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\n                         focus:outline-none focus:ring-2 focus:ring-blue-500"\n            \/>\n          <\/div>\n\n          <div>\n            <label className="block text-sm font-medium text-gray-700 mb-1">\n              \uc774\uba54\uc77c\n            <\/label>\n            <input\n              type="email"\n              placeholder="hong@example.com"\n              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\n                         focus:outline-none focus:ring-2 focus:ring-blue-500"\n            \/>\n          <\/div>\n\n          <div>\n            <label className="block text-sm font-medium text-gray-700 mb-1">\n              \ube44\ubc00\ubc88\ud638\n            <\/label>\n            <input\n              type="password"\n              placeholder="\ucd5c\uc18c 8\uc790 \uc774\uc0c1"\n              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm\n                         focus:outline-none focus:ring-2 focus:ring-blue-500"\n            \/>\n          <\/div>\n\n          <button\n            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold\n                       py-2 rounded-lg transition-colors"\n          >\n            \uac00\uc785\ud558\uae30\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/main>\n  );\n}<\/code><\/pre>\n
\ud575\uc2ec \ud3ec\uc778\ud2b8<\/h3>\n\n\n\n\n\n\n\n\n\n
\uac1c\ub150<\/th>\n\ud074\ub798\uc2a4 \uc608\uc2dc<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
\ub808\uc774\uc544\uc6c3<\/td>\nflex<\/code>, grid<\/code>, items-center<\/code><\/td>\nFlexbox \/ Grid<\/td>\n<\/tr>\n
\uac04\uaca9<\/td>\np-4<\/code>, m-2<\/code>, space-y-4<\/code><\/td>\npadding \/ margin \/ \uc790\uc2dd \uac04\uaca9<\/td>\n<\/tr>\n
\ubc18\uc751\ud615<\/td>\nsm:<\/code>, md:<\/code>, lg:<\/code> \uc811\ub450\uc0ac<\/td>\n\ube0c\ub808\uc774\ud06c\ud3ec\uc778\ud2b8<\/td>\n<\/tr>\n
\uc0c1\ud0dc<\/td>\nhover:<\/code>, focus:<\/code>, disabled:<\/code><\/td>\n\uc778\ud130\ub799\uc158 \uc2a4\ud0c0\uc77c<\/td>\n<\/tr>\n
\ub2e4\ud06c\ubaa8\ub4dc<\/td>\ndark:<\/code> \uc811\ub450\uc0ac<\/td>\n\ub2e4\ud06c \ud14c\ub9c8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
2. shadcn\/ui<\/h2>\n
\uac1c\uc694<\/h3>\n
shadcn\/ui\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \uc544\ub2d9\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8 \ucf54\ub4dc\ub97c \uc9c1\uc811 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ubcf5\uc0ac\ud574 \ub123\ub294<\/strong> \ubc29\uc2dd\uc73c\ub85c, Radix UI + Tailwind \uae30\ubc18\uc758 \uc644\uc131\ub3c4 \ub192\uc740 UI\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. Tailwind v4\uc640 React 19\ub97c \uc644\uc804\ud788 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n
\uc124\uce58<\/h3>\n
npx shadcn@latest init<\/code><\/pre>\n
\n
CLI\uac00 \uc790\ub3d9\uc73c\ub85c globals.css<\/code>\uc5d0 shadcn \ud14c\ub9c8 \ubcc0\uc218\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4. Tailwind v4 \ubc29\uc2dd(@theme inline<\/code>)\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
\ud544\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac1c\ubcc4 \uc124\uce58:<\/p>\n
npx shadcn@latest add button input label card form<\/code><\/pre>\n
globals.css \u2014 shadcn + Tailwind v4 \uad6c\uc870<\/h3>\n
npx shadcn init<\/code> \uc2e4\ud589 \ud6c4 globals.css<\/code>\ub294 \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\uac00 \ub429\ub2c8\ub2e4:<\/p>\n
\/* src\/app\/globals.css *\/\n@import "tailwindcss";\n@import "tw-animate-css"; \/* shadcn \uc560\ub2c8\uba54\uc774\uc158 (v4\uc5d0\uc11c tailwindcss-animate \ub300\uccb4) *\/\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --radius: 0.625rem;\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --primary: oklch(0.985 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  \/* ... *\/\n}\n\n\/* v4 \ud575\uc2ec: @theme inline\uc73c\ub85c CSS \ubcc0\uc218\ub97c Tailwind \uc720\ud2f8\ub9ac\ud2f0\uc5d0 \uc5f0\uacb0 *\/\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}<\/code><\/pre>\n
\n
@theme inline<\/code>\uc774 \ud575\uc2ec\uc785\ub2c8\ub2e4.<\/strong> :root<\/code>\uc5d0\uc11c \uc815\uc758\ud55c CSS \ubcc0\uc218\ub97c Tailwind \uc720\ud2f8\ub9ac\ud2f0(bg-background<\/code>, text-primary<\/code> \ub4f1)\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \uc5f0\uacb0\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
\ucee4\uc2a4\ud140 \uc0c9\uc0c1 \ucd94\uac00<\/h3>\n
\uc0c8 \uc0c9\uc0c1\uc744 \ucd94\uac00\ud560 \ub54c\ub3c4 \ub3d9\uc77c\ud55c \ud328\ud134\uc744 \ub530\ub985\ub2c8\ub2e4:<\/p>\n
:root {\n  --warning: oklch(0.84 0.16 84);\n  --warning-foreground: oklch(0.28 0.07 46);\n}\n\n.dark {\n  --warning: oklch(0.41 0.11 46);\n  --warning-foreground: oklch(0.99 0.02 95);\n}\n\n@theme inline {\n  --color-warning: var(--warning);\n  --color-warning-foreground: var(--warning-foreground);\n}<\/code><\/pre>\n
\uc774\ud6c4 bg-warning<\/code>, text-warning-foreground<\/code> \ud074\ub798\uc2a4\ub85c \ubc14\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc0ac\uc6a9\ubc95<\/h3>\n
\/\/ src\/app\/page.tsx - Step 2: shadcn\/ui \ucef4\ud3ec\ub10c\ud2b8 \uc801\uc6a9\nimport { Button } from "@\/components\/ui\/button";\nimport { Input } from "@\/components\/ui\/input";\nimport { Label } from "@\/components\/ui\/label";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from "@\/components\/ui\/card";\n\nexport default function Page() {\n  return (\n    <main className="min-h-screen bg-gray-50 flex items-center justify-center p-4">\n      <Card className="w-full max-w-md">\n        <CardHeader>\n          <CardTitle>\ud68c\uc6d0\uac00\uc785<\/CardTitle>\n          <CardDescription>\n            \uc544\ub798 \uc815\ubcf4\ub97c \uc785\ub825\ud574 \uacc4\uc815\uc744 \ub9cc\ub4dc\uc138\uc694.\n          <\/CardDescription>\n        <\/CardHeader>\n        <CardContent>\n          <div className="space-y-4">\n            <div className="space-y-1">\n              <Label htmlFor="name">\uc774\ub984<\/Label>\n              <Input id="name" placeholder="\ud64d\uae38\ub3d9" \/>\n            <\/div>\n\n            <div className="space-y-1">\n              <Label htmlFor="email">\uc774\uba54\uc77c<\/Label>\n              <Input id="email" type="email" placeholder="hong@example.com" \/>\n            <\/div>\n\n            <div className="space-y-1">\n              <Label htmlFor="password">\ube44\ubc00\ubc88\ud638<\/Label>\n              <Input id="password" type="password" placeholder="\ucd5c\uc18c 8\uc790 \uc774\uc0c1" \/>\n            <\/div>\n\n            <Button className="w-full">\uac00\uc785\ud558\uae30<\/Button>\n          <\/div>\n        <\/CardContent>\n      <\/Card>\n    <\/main>\n  );\n}<\/code><\/pre>\n
\uc790\uc8fc \uc4f0\ub294 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
npx shadcn@latest add dialog sonner select checkbox badge table<\/code><\/pre>\n
\n
v4\uc5d0\uc11c\ub294 toast<\/code> \ub300\uc2e0 sonner<\/code>\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. tailwindcss-animate<\/code>\ub3c4 tw-animate-css<\/code>\ub85c \ub300\uccb4\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
\n
3. Zod<\/h2>\n
\uac1c\uc694<\/h3>\n
Zod\ub294 TypeScript-first \uc2a4\ud0a4\ub9c8 \uc120\uc5b8 & \uc720\ud6a8\uc131 \uac80\uc0ac<\/strong> \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \uc2a4\ud0a4\ub9c8\ub97c \uc815\uc758\ud558\uba74 \ud0c0\uc785 \ucd94\ub860\uc774 \uc790\ub3d9\uc73c\ub85c \ub429\ub2c8\ub2e4.<\/p>\n
\uc124\uce58<\/h3>\n
npm install zod<\/code><\/pre>\n
\uc0ac\uc6a9\ubc95<\/h3>\n
\ud3fc\uc5d0 \uc0ac\uc6a9\ud560 \uc2a4\ud0a4\ub9c8\ub97c \ubcc4\ub3c4 \ud30c\uc77c\ub85c \ubd84\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n
\/\/ lib\/schemas\/auth.ts - Step 3: Zod \uc2a4\ud0a4\ub9c8 \uc815\uc758\nimport { z } from "zod";\n\nexport const signUpSchema = z\n  .object({\n    name: z\n      .string()\n      .min(2, "\uc774\ub984\uc740 2\uc790 \uc774\uc0c1\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4.")\n      .max(20, "\uc774\ub984\uc740 20\uc790 \uc774\ud558\uc5ec\uc57c \ud569\ub2c8\ub2e4."),\n\n    email: z\n      .string()\n      .email("\uc62c\ubc14\ub978 \uc774\uba54\uc77c \ud615\uc2dd\uc774 \uc544\ub2d9\ub2c8\ub2e4."),\n\n    password: z\n      .string()\n      .min(8, "\ube44\ubc00\ubc88\ud638\ub294 8\uc790 \uc774\uc0c1\uc774\uc5b4\uc57c \ud569\ub2c8\ub2e4.")\n      .regex(\n        \/^(?=.*[a-zA-Z])(?=.*[0-9])\/,\n        "\ube44\ubc00\ubc88\ud638\ub294 \uc601\ubb38\uacfc \uc22b\uc790\ub97c \ud3ec\ud568\ud574\uc57c \ud569\ub2c8\ub2e4."\n      ),\n\n    confirmPassword: z.string(),\n  })\n  .refine((data) => data.password === data.confirmPassword, {\n    message: "\ube44\ubc00\ubc88\ud638\uac00 \uc77c\uce58\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.",\n    path: ["confirmPassword"],\n  });\n\n\/\/ \uc2a4\ud0a4\ub9c8\uc5d0\uc11c \ud0c0\uc785 \uc790\ub3d9 \ucd94\ub860\nexport type SignUpInput = z.infer<typeof signUpSchema>;<\/code><\/pre>\n
Zod \ud575\uc2ec API<\/h3>\n
import { z } from "zod";\n\n\/\/ \uae30\ubcf8 \ud0c0\uc785\nz.string()\nz.number()\nz.boolean()\nz.date()\nz.undefined()\nz.null()\n\n\/\/ \ubb38\uc790\uc5f4 \uac80\uc99d\nz.string().min(1).max(100).email().url().uuid().regex(\/pattern\/)\n\n\/\/ \uc22b\uc790 \uac80\uc99d\nz.number().min(0).max(100).int().positive().nonnegative()\n\n\/\/ \ubc30\uc5f4 & \uac1d\uccb4\nz.array(z.string()).min(1)\nz.object({ key: z.string() })\n\n\/\/ \uc120\ud0dd & \uae30\ubcf8\uac12\nz.string().optional()          \/\/ string | undefined\nz.string().nullable()          \/\/ string | null\nz.string().default("\uae30\ubcf8\uac12")\n\n\/\/ \ucee4\uc2a4\ud140 \uac80\uc99d\nz.string().refine((val) => val !== "\uae08\uc9c0\uc5b4", {\n  message: "\uae08\uc9c0\ub41c \ub2e8\uc5b4\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.",\n})\n\n\/\/ \ud0c0\uc785 \ucd94\ucd9c\ntype MyType = z.infer<typeof mySchema><\/code><\/pre>\n
\n
4. React Hook Form + Zod<\/h2>\n
\uac1c\uc694<\/h3>\n
React Hook Form(RHF)\uc740 \ube44\uc81c\uc5b4 \ucef4\ud3ec\ub10c\ud2b8 \ubc29\uc2dd<\/strong>\uc73c\ub85c \ud3fc \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4. \ub9ac\ub80c\ub354\ub9c1\uc744 \ucd5c\uc18c\ud654\ud574 \uc131\ub2a5\uc774 \ub6f0\uc5b4\ub0a9\ub2c8\ub2e4. Zod\uc640 \uacb0\ud569\ud558\uba74 \uc2a4\ud0a4\ub9c8 \uae30\ubc18 \uc720\ud6a8\uc131 \uac80\uc0ac\uac00 \uc644\uc131\ub429\ub2c8\ub2e4.<\/p>\n
\uc124\uce58<\/h3>\n
npm install react-hook-form @hookform\/resolvers<\/code><\/pre>\n
\n
@hookform\/resolvers<\/code>\ub294 RHF\uc640 Zod\ub97c \uc5f0\uacb0\ud574\uc8fc\ub294 \uc5b4\ub311\ud130\uc785\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
form.tsx \uc218\ub3d9\uc0dd\uc131<\/h3>\n
form \uc774 \uc124\uce58\uac00 \ub418\uc9c0 \uc54a\uc544\uc11c \uc218\ub3d9\uc73c\ub85c \uc0dd\uc131\ud574 \uc90d\ub2c8\ub2e4.<\/p>\n
\/\/ src\/components\/form.tsx\n"use client"\n\nimport * as React from "react"\nimport { Slot } from "radix-ui"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n} from "react-hook-form"\n\nimport { cn } from "@\/lib\/utils"\nimport { Label } from "@\/components\/ui\/label"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nfunction FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} \/>\n    <\/FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState, formState } = useFormContext()\n\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error("useFormField should be used within <FormField>")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<"div">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot="form-item"\n        className={cn("grid gap-2", className)}\n        {...props}\n      \/>\n    <\/FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot="form-label"\n      data-error={!!error}\n      className={cn("data-[error=true]:text-destructive", className)}\n      htmlFor={formItemId}\n      {...props}\n    \/>\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot.Root\n      data-slot="form-control"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    \/>\n  )\n}\n\nfunction FormDescription({\n  className,\n  ...props\n}: React.ComponentProps<"p">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot="form-description"\n      id={formDescriptionId}\n      className={cn("text-muted-foreground text-sm", className)}\n      {...props}\n    \/>\n  )\n}\n\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<"p">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? "") : children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot="form-message"\n      id={formMessageId}\n      className={cn("text-destructive text-sm", className)}\n      {...props}\n    >\n      {body}\n    <\/p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormMessage,\n}<\/code><\/pre>\n
\uc0ac\uc6a9\ubc95<\/h3>\n
\/\/ app\/page.tsx - Step 4: React Hook Form + Zod \uc5f0\uacb0\n"use client";\n\nimport { useForm } from "react-hook-form";\nimport { zodResolver } from "@hookform\/resolvers\/zod";\nimport { Button } from "@\/components\/ui\/button";\nimport { Input } from "@\/components\/ui\/input";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from "@\/components\/ui\/form";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from "@\/components\/ui\/card";\nimport { signUpSchema, type SignUpInput } from "@\/lib\/schemas\/auth";\n\nexport default function Page() {\n  const form = useForm<SignUpInput>({\n    resolver: zodResolver(signUpSchema),\n    defaultValues: {\n      name: "",\n      email: "",\n      password: "",\n      confirmPassword: "",\n    },\n  });\n\n  const onSubmit = (data: SignUpInput) => {\n    \/\/ \uc720\ud6a8\uc131 \uac80\uc0ac \ud1b5\uacfc \ud6c4 \uc2e4\ud589\n    console.log("\ud3fc \ub370\uc774\ud130:", data);\n  };\n\n  return (\n    <main className="min-h-screen bg-gray-50 flex items-center justify-center p-4">\n      <Card className="w-full max-w-md">\n        <CardHeader>\n          <CardTitle>\ud68c\uc6d0\uac00\uc785<\/CardTitle>\n          <CardDescription>\n            \uc544\ub798 \uc815\ubcf4\ub97c \uc785\ub825\ud574 \uacc4\uc815\uc744 \ub9cc\ub4dc\uc138\uc694.\n          <\/CardDescription>\n        <\/CardHeader>\n        <CardContent>\n          {\/* shadcn Form\uc740 RHF FormProvider\ub97c \ub0b4\ubd80\uc801\uc73c\ub85c \uc0ac\uc6a9 *\/}\n          <Form {...form}>\n            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">\n\n              <FormField\n                control={form.control}\n                name="name"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>\uc774\ub984<\/FormLabel>\n                    <FormControl>\n                      <Input placeholder="\ud64d\uae38\ub3d9" {...field} \/>\n                    <\/FormControl>\n                    <FormMessage \/> {\/* \uc5d0\ub7ec \uba54\uc2dc\uc9c0 \uc790\ub3d9 \ud45c\uc2dc *\/}\n                  <\/FormItem>\n                )}\n              \/>\n\n              <FormField\n                control={form.control}\n                name="email"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>\uc774\uba54\uc77c<\/FormLabel>\n                    <FormControl>\n                      <Input type="email" placeholder="hong@example.com" {...field} \/>\n                    <\/FormControl>\n                    <FormMessage \/>\n                  <\/FormItem>\n                )}\n              \/>\n\n              <FormField\n                control={form.control}\n                name="password"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>\ube44\ubc00\ubc88\ud638<\/FormLabel>\n                    <FormControl>\n                      <Input type="password" placeholder="\ucd5c\uc18c 8\uc790 \uc774\uc0c1" {...field} \/>\n                    <\/FormControl>\n                    <FormMessage \/>\n                  <\/FormItem>\n                )}\n              \/>\n\n              <FormField\n                control={form.control}\n                name="confirmPassword"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>\ube44\ubc00\ubc88\ud638 \ud655\uc778<\/FormLabel>\n                    <FormControl>\n                      <Input type="password" placeholder="\ube44\ubc00\ubc88\ud638 \uc7ac\uc785\ub825" {...field} \/>\n                    <\/FormControl>\n                    <FormMessage \/>\n                  <\/FormItem>\n                )}\n              \/>\n\n              <Button\n                type="submit"\n                className="w-full"\n                disabled={form.formState.isSubmitting}\n              >\n                {form.formState.isSubmitting ? "\ucc98\ub9ac \uc911..." : "\uac00\uc785\ud558\uae30"}\n              <\/Button>\n\n            <\/form>\n          <\/Form>\n        <\/CardContent>\n      <\/Card>\n    <\/main>\n  );\n}<\/code><\/pre>\n
RHF \ud575\uc2ec API<\/h3>\n
const form = useForm<T>({\n  resolver: zodResolver(schema),  \/\/ Zod \uc5f0\uacb0\n  defaultValues: { ... },         \/\/ \ucd08\uae30\uac12\n  mode: "onChange",               \/\/ \uac80\uc99d \uc2dc\uc810: onChange | onBlur | onSubmit\n});\n\n\/\/ \ud3fc \uc0c1\ud0dc\nform.formState.isSubmitting   \/\/ \uc81c\ucd9c \uc911 \uc5ec\ubd80\nform.formState.errors         \/\/ \uc5d0\ub7ec \uac1d\uccb4\nform.formState.isDirty        \/\/ \uac12\uc774 \ubcc0\uacbd\ub410\ub294\uc9c0\nform.formState.isValid        \/\/ \uc720\ud6a8\uc131 \ud1b5\uacfc \uc5ec\ubd80\n\n\/\/ \uc720\ud2f8\nform.reset()                  \/\/ \ud3fc \ucd08\uae30\ud654\nform.setValue("field", value) \/\/ \uac12 \uc124\uc815\nform.getValues()              \/\/ \ud604\uc7ac \uac12 \uc77d\uae30\nform.watch("field")           \/\/ \uc2e4\uc2dc\uac04 \uac12 \uad6c\ub3c5\nform.setError("field", { message: "..." }) \/\/ \uc218\ub3d9 \uc5d0\ub7ec \uc124\uc815<\/code><\/pre>\n
5. TanStack Query<\/h2>\n
\uac1c\uc694<\/h3>\n
TanStack Query(\uad6c React Query)\ub294 \uc11c\ubc84 \uc0c1\ud0dc(server state) \uad00\ub9ac<\/strong> \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ub370\uc774\ud130 \ud328\uce6d, \uce90\uc2f1, \ub3d9\uae30\ud654, \ubc30\uacbd \uac31\uc2e0\uc744 \uc790\ub3d9\uc73c\ub85c \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n
\uc124\uce58<\/h3>\n
npm install @tanstack\/react-query @tanstack\/react-query-devtools<\/code><\/pre>\n
Provider \uc124\uc815<\/h3>\n
\/\/ app\/providers.tsx - QueryClient Provider \uc124\uc815\n"use client";\n\nimport { QueryClient, QueryClientProvider } from "@tanstack\/react-query";\nimport { ReactQueryDevtools } from "@tanstack\/react-query-devtools";\nimport { useState } from "react";\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n  const [queryClient] = useState(\n    () =>\n      new QueryClient({\n        defaultOptions: {\n          queries: {\n            staleTime: 60 * 1000,   \/\/ 1\ubd84 \ub3d9\uc548 fresh \uc0c1\ud0dc \uc720\uc9c0\n            retry: 1,               \/\/ \uc2e4\ud328 \uc2dc 1\ubc88 \uc7ac\uc2dc\ub3c4\n          },\n        },\n      })\n  );\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      {children}\n      <ReactQueryDevtools initialIsOpen={false} \/>\n    <\/QueryClientProvider>\n  );\n}<\/code><\/pre>\n
\/\/ app\/layout.tsx - Provider \uc801\uc6a9\nimport { Providers } from ".\/providers";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang="ko">\n      <body>\n        <Providers>{children}<\/Providers>\n      <\/body>\n    <\/html>\n  );\n}<\/code><\/pre>\n
API \ud568\uc218 \ubd84\ub9ac<\/h3>\n
\/\/ lib\/api\/auth.ts - API \ud568\uc218 \uc815\uc758\nimport { SignUpInput } from "@\/lib\/schemas\/auth";\n\nexport interface User {\n  id: string;\n  name: string;\n  email: string;\n  createdAt: string;\n}\n\n\/\/ \uc0ac\uc6a9\uc790 \ubaa9\ub85d \uc870\ud68c\nexport async function fetchUsers(): Promise<User[]> {\n  const res = await fetch("\/api\/users");\n  if (!res.ok) throw new Error("\uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc744 \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.");\n  return res.json();\n}\n\n\/\/ \ud68c\uc6d0\uac00\uc785 API\nexport async function signUp(data: Omit<SignUpInput, "confirmPassword">): Promise<User> {\n  const res = await fetch("\/api\/auth\/signup", {\n    method: "POST",\n    headers: { "Content-Type": "application\/json" },\n    body: JSON.stringify(data),\n  });\n  if (!res.ok) {\n    const error = await res.json();\n    throw new Error(error.message || "\ud68c\uc6d0\uac00\uc785\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.");\n  }\n  return res.json();\n}<\/code><\/pre>\n
useQuery & useMutation \uc801\uc6a9<\/h3>\n
\/\/ app\/page.tsx - Step 5: TanStack Query \uc5f0\uacb0\n"use client";\n\nimport { useQuery, useMutation, useQueryClient } from "@tanstack\/react-query";\nimport { useForm } from "react-hook-form";\nimport { zodResolver } from "@hookform\/resolvers\/zod";\nimport { Button } from "@\/components\/ui\/button";\nimport { Input } from "@\/components\/ui\/input";\nimport {\n  Form, FormControl, FormField, FormItem, FormLabel, FormMessage,\n} from "@\/components\/ui\/form";\nimport {\n  Card, CardContent, CardDescription, CardHeader, CardTitle,\n} from "@\/components\/ui\/card";\nimport { signUpSchema, type SignUpInput } from "@\/lib\/schemas\/auth";\nimport { fetchUsers, signUp } from "@\/lib\/api\/auth";\n\nexport default function Page() {\n  const queryClient = useQueryClient();\n\n  \/\/ \u2705 \ub370\uc774\ud130 \uc870\ud68c - \uc790\ub3d9 \uce90\uc2f1, \ubc31\uadf8\ub77c\uc6b4\ub4dc \uac31\uc2e0\n  const { data: users, isLoading, isError } = useQuery({\n    queryKey: ["users"],        \/\/ \uce90\uc2dc \ud0a4 (\ubc30\uc5f4)\n    queryFn: fetchUsers,        \/\/ \ub370\uc774\ud130 \ud328\uce6d \ud568\uc218\n    staleTime: 5 * 60 * 1000,  \/\/ 5\ubd84 \ub3d9\uc548 fresh \uc0c1\ud0dc\n  });\n\n  \/\/ \u2705 \ub370\uc774\ud130 \ubcc0\uacbd - \uc131\uacf5\/\uc2e4\ud328 \ud578\ub4e4\ub9c1\n  const signUpMutation = useMutation({\n    mutationFn: signUp,\n    onSuccess: (newUser) => {\n      \/\/ \uce90\uc2dc \ubb34\ud6a8\ud654 \u2192 users \ucffc\ub9ac \uc790\ub3d9 \uc7ac\ud328\uce6d\n      queryClient.invalidateQueries({ queryKey: ["users"] });\n      alert(`${newUser.name}\ub2d8, \ud658\uc601\ud569\ub2c8\ub2e4!`);\n      form.reset();\n    },\n    onError: (error: Error) => {\n      form.setError("root", { message: error.message });\n    },\n  });\n\n  const form = useForm<SignUpInput>({\n    resolver: zodResolver(signUpSchema),\n    defaultValues: { name: "", email: "", password: "", confirmPassword: "" },\n  });\n\n  const onSubmit = (data: SignUpInput) => {\n    const { confirmPassword, ...payload } = data;\n    signUpMutation.mutate(payload);\n  };\n\n  return (\n    <main className="min-h-screen bg-gray-50 flex items-center justify-center p-4">\n      <div className="w-full max-w-md space-y-6">\n\n        {\/* \uc0ac\uc6a9\uc790 \ubaa9\ub85d *\/}\n        <Card>\n          <CardHeader>\n            <CardTitle>\uac00\uc785\ud55c \uc0ac\uc6a9\uc790<\/CardTitle>\n          <\/CardHeader>\n          <CardContent>\n            {isLoading && <p className="text-sm text-gray-500">\ubd88\ub7ec\uc624\ub294 \uc911...<\/p>}\n            {isError && <p className="text-sm text-red-500">\ubd88\ub7ec\uc624\uae30 \uc2e4\ud328<\/p>}\n            {users?.map((user) => (\n              <div key={user.id} className="text-sm py-1 border-b last:border-0">\n                <span className="font-medium">{user.name}<\/span>\n                <span className="text-gray-500 ml-2">{user.email}<\/span>\n              <\/div>\n            ))}\n          <\/CardContent>\n        <\/Card>\n\n        {\/* \ud68c\uc6d0\uac00\uc785 \ud3fc *\/}\n        <Card>\n          <CardHeader>\n            <CardTitle>\ud68c\uc6d0\uac00\uc785<\/CardTitle>\n            <CardDescription>\uc544\ub798 \uc815\ubcf4\ub97c \uc785\ub825\ud574 \uacc4\uc815\uc744 \ub9cc\ub4dc\uc138\uc694.<\/CardDescription>\n          <\/CardHeader>\n          <CardContent>\n            <Form {...form}>\n              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">\n                {form.formState.errors.root && (\n                  <p className="text-sm text-red-500">\n                    {form.formState.errors.root.message}\n                  <\/p>\n                )}\n\n                <FormField control={form.control} name="name"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>\uc774\ub984<\/FormLabel>\n                      <FormControl><Input placeholder="\ud64d\uae38\ub3d9" {...field} \/><\/FormControl>\n                      <FormMessage \/>\n                    <\/FormItem>\n                  )}\n                \/>\n                <FormField control={form.control} name="email"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>\uc774\uba54\uc77c<\/FormLabel>\n                      <FormControl><Input type="email" placeholder="hong@example.com" {...field} \/><\/FormControl>\n                      <FormMessage \/>\n                    <\/FormItem>\n                  )}\n                \/>\n                <FormField control={form.control} name="password"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>\ube44\ubc00\ubc88\ud638<\/FormLabel>\n                      <FormControl><Input type="password" {...field} \/><\/FormControl>\n                      <FormMessage \/>\n                    <\/FormItem>\n                  )}\n                \/>\n                <FormField control={form.control} name="confirmPassword"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>\ube44\ubc00\ubc88\ud638 \ud655\uc778<\/FormLabel>\n                      <FormControl><Input type="password" {...field} \/><\/FormControl>\n                      <FormMessage \/>\n                    <\/FormItem>\n                  )}\n                \/>\n\n                <Button\n                  type="submit"\n                  className="w-full"\n                  disabled={signUpMutation.isPending}\n                >\n                  {signUpMutation.isPending ? "\ucc98\ub9ac \uc911..." : "\uac00\uc785\ud558\uae30"}\n                <\/Button>\n              <\/form>\n            <\/Form>\n          <\/CardContent>\n        <\/Card>\n      <\/div>\n    <\/main>\n  );\n}<\/code><\/pre>\n
\uac80\uc0c9\uc2dc \ud30c\ub77c\ubbf8\ud130\ub97c \uc804\ub2ec\ud558\uace0\uc790 \ud55c\ub2e4\uba74<\/p>\n
\/\/ src\/lib\/api\/auth.ts\nexport interface FetchUsersParams {\n  search?: string;\n  limit?: number;\n  page?: number;\n}\n\nexport async function fetchUsers(params?: FetchUsersParams): Promise<User[]> {\n  const query = new URLSearchParams();\n  if (params?.search) query.set("search", params.search);\n  if (params?.limit)  query.set("limit",  String(params.limit));\n  if (params?.page)   query.set("page",   String(params.page));\n\n  const res = await fetch(`\/api\/users?${query}`);\n  if (!res.ok) throw new Error("\uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc744 \ubd88\ub7ec\uc624\uc9c0 \ubabb\ud588\uc2b5\ub2c8\ub2e4.");\n  return res.json();\n}<\/code><\/pre>\n
\/\/ page.tsx\nconst [params, setParams] = useState<FetchUsersParams>({\n  page: 1,\n  limit: 20\n});\n\nconst { data: users } = useQuery({\n  queryKey: ["users", params],   \/\/ params \uac1d\uccb4 \uc804\uccb4\ub97c key\ub85c\n  queryFn: () => fetchUsers(params),\n});<\/code><\/pre>\n
TanStack Query \ud575\uc2ec API<\/h3>\n
\/\/ useQuery - \ub370\uc774\ud130 \uc870\ud68c\nconst { data, isLoading, isError, error, refetch, isFetching } = useQuery({\n  queryKey: ["users", userId],  \/\/ \ud0a4\uac00 \ubc14\ub00c\uba74 \uc790\ub3d9 \uc7ac\ud328\uce6d\n  queryFn: () => fetchUser(userId),\n  enabled: !!userId,            \/\/ \uc870\uac74\ubd80 \uc2e4\ud589\n  staleTime: 1000 * 60,         \/\/ \uce90\uc2dc \uc720\ud6a8 \uc2dc\uac04 (ms)\n  gcTime: 1000 * 60 * 5,        \/\/ \uac00\ube44\uc9c0 \uceec\ub809\uc158 \uc2dc\uac04 (\uad6c cacheTime)\n  select: (data) => data.users, \/\/ \ub370\uc774\ud130 \ubcc0\ud658\n});\n\n\/\/ useMutation - \ub370\uc774\ud130 \ubcc0\uacbd\nconst mutation = useMutation({\n  mutationFn: createPost,\n  onMutate: (variables) => {},   \/\/ \uc694\uccad \uc804 (\ub099\uad00\uc801 \uc5c5\ub370\uc774\ud2b8\uc5d0 \ud65c\uc6a9)\n  onSuccess: (data, variables) => {},\n  onError: (error, variables, context) => {},\n  onSettled: () => {},           \/\/ \uc131\uacf5\/\uc2e4\ud328 \uc0c1\uad00\uc5c6\uc774 \ud56d\uc0c1 \uc2e4\ud589\n});\n\nmutation.mutate(payload);\nmutation.mutateAsync(payload);  \/\/ Promise \ubc18\ud658\n\n\/\/ \uce90\uc2dc \uc870\uc791\nqueryClient.invalidateQueries({ queryKey: ["users"] })  \/\/ \ubb34\ud6a8\ud654 \u2192 \uc7ac\ud328\uce6d\nqueryClient.setQueryData(["users"], newData)             \/\/ \uc9c1\uc811 \uce90\uc2dc \uc5c5\ub370\uc774\ud2b8\nqueryClient.prefetchQuery({ queryKey, queryFn })         \/\/ \ubbf8\ub9ac \ud328\uce6d<\/code><\/pre>\n
6. Zustand<\/h2>\n
\uac1c\uc694<\/h3>\n
Zustand\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac<\/strong> \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. Redux\ubcf4\ub2e4 \ud6e8\uc52c \uac04\ub2e8\ud558\uace0, Context API\ubcf4\ub2e4 \uc131\ub2a5\uc774 \uc88b\uc2b5\ub2c8\ub2e4. TanStack Query\uac00 \uc11c\ubc84 \uc0c1\ud0dc\ub97c \ub2f4\ub2f9\ud55c\ub2e4\uba74, Zustand\ub294 UI \uc0c1\ud0dc(\ubaa8\ub2ec, \ud14c\ub9c8, \uc0ac\uc774\ub4dc\ubc14 \ub4f1)\ub97c \ub2f4\ub2f9\ud569\ub2c8\ub2e4.<\/p>\n
\uc124\uce58<\/h3>\n
npm install zustand<\/code><\/pre>\n
\uc2a4\ud1a0\uc5b4 \uc815\uc758<\/h3>\n
\/\/ store\/useAuthStore.ts - Step 6: Zustand \uc2a4\ud1a0\uc5b4\nimport { create } from "zustand";\nimport { persist, devtools } from "zustand\/middleware";\n\ninterface AuthUser {\n  id: string;\n  name: string;\n  email: string;\n}\n\ninterface AuthStore {\n  \/\/ \uc0c1\ud0dc\n  user: AuthUser | null;\n  isAuthenticated: boolean;\n\n  \/\/ \uc561\uc158\n  setUser: (user: AuthUser) => void;\n  logout: () => void;\n}\n\nexport const useAuthStore = create<AuthStore>()(\n  devtools(            \/\/ Redux DevTools \uc5f0\ub3d9\n    persist(           \/\/ localStorage\uc5d0 \uc790\ub3d9 \uc800\uc7a5\n      (set) => ({\n        user: null,\n        isAuthenticated: false,\n\n        setUser: (user) =>\n          set({ user, isAuthenticated: true }, false, "setUser"),\n\n        logout: () =>\n          set({ user: null, isAuthenticated: false }, false, "logout"),\n      }),\n      {\n        name: "auth-storage",   \/\/ localStorage \ud0a4\n        partialize: (state) => ({ user: state.user }), \/\/ \uc800\uc7a5\ud560 \uc0c1\ud0dc \uc120\ud0dd\n      }\n    )\n  )\n);<\/code><\/pre>\n
\/\/ store\/useUIStore.ts - UI \uc0c1\ud0dc \uc2a4\ud1a0\uc5b4 \uc608\uc2dc\nimport { create } from "zustand";\n\ninterface UIStore {\n  isSignUpModalOpen: boolean;\n  theme: "light" | "dark";\n  openSignUpModal: () => void;\n  closeSignUpModal: () => void;\n  toggleTheme: () => void;\n}\n\nexport const useUIStore = create<UIStore>((set) => ({\n  isSignUpModalOpen: false,\n  theme: "light",\n\n  openSignUpModal: () => set({ isSignUpModalOpen: true }),\n  closeSignUpModal: () => set({ isSignUpModalOpen: false }),\n  toggleTheme: () =>\n    set((state) => ({ theme: state.theme === "light" ? "dark" : "light" })),\n}));<\/code><\/pre>\n
Zustand \ud575\uc2ec \ud328\ud134<\/h3>\n
\/\/ \u2705 \ud544\uc694\ud55c \uc0c1\ud0dc\/\uc561\uc158\ub9cc \uad6c\ub3c5 (\uc131\ub2a5 \ucd5c\uc801\ud654)\nconst user = useAuthStore((state) => state.user);\nconst setUser = useAuthStore((state) => state.setUser);\n\n\/\/ \u2705 \uc5ec\ub7ec \uac12 \ub3d9\uc2dc \uad6c\ub3c5\nconst { user, isAuthenticated } = useAuthStore(\n  (state) => ({ user: state.user, isAuthenticated: state.isAuthenticated })\n);\n\n\/\/ \u2705 \uc2a4\ud1a0\uc5b4 \uc678\ubd80\uc5d0\uc11c \uc9c1\uc811 \uc811\uadfc (React \ucef4\ud3ec\ub10c\ud2b8 \ubc16)\nconst { logout } = useAuthStore.getState();\n\n\/\/ \u2705 \ubbf8\ub4e4\uc6e8\uc5b4 \uc870\ud569\nimport { create } from "zustand";\nimport { persist, devtools, immer } from "zustand\/middleware";\n\nconst useStore = create<State>()(\n  devtools(\n    persist(\n      immer((set) => ({\n        \/\/ immer\ub97c \uc4f0\uba74 \ubd88\ubcc0\uc131 \uc5c6\uc774 \uc9c1\uc811 \uc218\uc815 \uac00\ub2a5\n        users: [],\n        addUser: (user) =>\n          set((state) => {\n            state.users.push(user); \/\/ \uc9c1\uc811 push \uac00\ub2a5\n          }),\n      })),\n      { name: "my-storage" }\n    )\n  )\n);<\/code><\/pre>\n
7. \ucd5c\uc885 \uc644\uc131 \ucf54\ub4dc<\/h2>\n
\ubaa8\ub4e0 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ud1b5\ud569\ud55c \ucd5c\uc885 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\ud30c\uc77c \uad6c\uc870<\/h3>\n
my-app\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 app\/\n\u2502   \u2502   \u251c\u2500\u2500 globals.css         \u2190 Tailwind v4 + shadcn \ud14c\ub9c8\n\u2502   \u2502   \u251c\u2500\u2500 layout.tsx          \u2190 QueryClient Provider\n\u2502   \u2502   \u251c\u2500\u2500 page.tsx            \u2190 \uba54\uc778 \ud398\uc774\uc9c0\n\u2502   \u2502   \u2514\u2500\u2500 providers.tsx       \u2190 \uc804\uc5ed Provider \ubaa8\uc74c\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u2514\u2500\u2500 ui\/                 \u2190 shadcn \ucef4\ud3ec\ub10c\ud2b8\n\u2502   \u251c\u2500\u2500 lib\/\n\u2502   \u2502   \u251c\u2500\u2500 api\/\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 auth.ts         \u2190 API \ud568\uc218\n\u2502   \u2502   \u2514\u2500\u2500 schemas\/\n\u2502   \u2502       \u2514\u2500\u2500 auth.ts         \u2190 Zod \uc2a4\ud0a4\ub9c8\n\u2502   \u2514\u2500\u2500 store\/\n\u2502       \u251c\u2500\u2500 useAuthStore.ts     \u2190 Zustand \uc778\uc99d \uc2a4\ud1a0\uc5b4\n\u2502       \u2514\u2500\u2500 useUIStore.ts       \u2190 Zustand UI \uc2a4\ud1a0\uc5b4\n\u251c\u2500\u2500 postcss.config.mjs          \u2190 @tailwindcss\/postcss \uc124\uc815\n\u2514\u2500\u2500 (tailwind.config.ts \uc5c6\uc74c)   \u2190 v4\uc5d0\uc11c\ub294 \ubd88\ud544\uc694<\/code><\/pre>\n
src\/app\/globals.css<\/code> \u2014 \uc644\uc131\ubcf8<\/h3>\n
@import "tailwindcss";\n@import "tw-animate-css";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.205 0 0);\n  --primary-foreground: oklch(0.985 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --radius: 0.625rem;\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.985 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.269 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.396 0.141 25.723);\n  --border: oklch(1 0 0 \/ 10%);\n  --input: oklch(1 0 0 \/ 15%);\n  --ring: oklch(0.556 0 0);\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n}<\/code><\/pre>\n
src\/app\/providers.tsx<\/code><\/h3>\n
"use client";\n\nimport { QueryClient, QueryClientProvider } from "@tanstack\/react-query";\nimport { ReactQueryDevtools } from "@tanstack\/react-query-devtools";\nimport { useState } from "react";\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n  const [queryClient] = useState(() => new QueryClient({\n    defaultOptions: { queries: { staleTime: 60 * 1000, retry: 1 } },\n  }));\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      {children}\n      <ReactQueryDevtools initialIsOpen={false} \/>\n    <\/QueryClientProvider>\n  );\n}<\/code><\/pre>\n
src\/app\/page.tsx<\/code> \u2014 \ucd5c\uc885 \uc644\uc131<\/h3>\n
\/\/ src\/app\/api\/auth\/routes.tsx\nimport { NextRequest, NextResponse } from "next\/server";\nimport { users } from "@\/lib\/store";\n\nexport async function POST(req: NextRequest) {\n  const { name, email, password } = await req.json();\n\n  if (users.find((u) => u.email === email)) {\n    return NextResponse.json({ message: "\uc774\ubbf8 \uc0ac\uc6a9 \uc911\uc778 \uc774\uba54\uc77c\uc785\ub2c8\ub2e4." }, { status: 409 });\n  }\n\n  const newUser = {\n    id: crypto.randomUUID(),\n    name,\n    email,\n    createdAt: new Date().toISOString(),\n  };\n  users.push(newUser);\n\n  return NextResponse.json(newUser, { status: 201 });\n}\n<\/code><\/pre>\n
\/\/ src\/app\/users\/routes.tsx\nimport { NextResponse } from "next\/server";\nimport { users } from "@\/lib\/store";\n\nexport async function GET() {\n  return NextResponse.json(users);\n}\n<\/code><\/pre>\n
\/\/ src\/lib\/store.tsx\n\/\/ \uc11c\ubc84 \uba54\ubaa8\ub9ac \uc784\uc2dc \uc800\uc7a5\uc18c (\uac1c\ubc1c\uc6a9)\nexport const users: { id: string; name: string; email: string; createdAt: string }[] = [];<\/code><\/pre>\n
"use client";\n\nimport { useQuery, useMutation, useQueryClient } from "@tanstack\/react-query";\nimport { useForm } from "react-hook-form";\nimport { zodResolver } from "@hookform\/resolvers\/zod";\nimport { Button } from "@\/components\/ui\/button";\nimport { Input } from "@\/components\/ui\/input";\nimport { Badge } from "@\/components\/ui\/badge";\nimport {\n  Form, FormControl, FormField, FormItem, FormLabel, FormMessage,\n} from "@\/components\/ui\/form";\nimport {\n  Card, CardContent, CardDescription, CardHeader, CardTitle,\n} from "@\/components\/ui\/card";\nimport {\n  Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger,\n} from "@\/components\/ui\/dialog";\nimport { signUpSchema, type SignUpInput } from "@\/lib\/schemas\/auth";\nimport { fetchUsers, signUp } from "@\/lib\/api\/auth";\nimport { useAuthStore } from "@\/store\/useAuthStore";\nimport { useUIStore } from "@\/store\/useUIStore";\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ \ud68c\uc6d0\uac00\uc785 \ud3fc \ucef4\ud3ec\ub10c\ud2b8\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction SignUpForm({ onSuccess }: { onSuccess: () => void }) {\n  const queryClient = useQueryClient();\n  const setUser = useAuthStore((state) => state.setUser);\n\n  const form = useForm<SignUpInput>({\n    resolver: zodResolver(signUpSchema),\n    defaultValues: { name: "", email: "", password: "", confirmPassword: "" },\n  });\n\n  const signUpMutation = useMutation({\n    mutationFn: signUp,\n    onSuccess: (newUser) => {\n      queryClient.invalidateQueries({ queryKey: ["users"] });\n      setUser(newUser);  \/\/ Zustand\uc5d0 \ub85c\uadf8\uc778 \uc720\uc800 \uc800\uc7a5\n      onSuccess();\n    },\n    onError: (error: Error) => {\n      form.setError("root", { message: error.message });\n    },\n  });\n\n  const onSubmit = (data: SignUpInput) => {\n    const { confirmPassword, ...payload } = data;\n    signUpMutation.mutate(payload);\n  };\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">\n        {form.formState.errors.root && (\n          <p className="text-sm text-destructive">\n            {form.formState.errors.root.message}\n          <\/p>\n        )}\n        {(["name", "email", "password", "confirmPassword"] as const).map((fieldName) => (\n          <FormField\n            key={fieldName}\n            control={form.control}\n            name={fieldName}\n            render={({ field }) => (\n              <FormItem>\n                <FormLabel>\n                  {{ name: "\uc774\ub984", email: "\uc774\uba54\uc77c", password: "\ube44\ubc00\ubc88\ud638", confirmPassword: "\ube44\ubc00\ubc88\ud638 \ud655\uc778" }[fieldName]}\n                <\/FormLabel>\n                <FormControl>\n                  <Input\n                    type={fieldName.toLowerCase().includes("password") ? "password" : "text"}\n                    {...field}\n                  \/>\n                <\/FormControl>\n                <FormMessage \/>\n              <\/FormItem>\n            )}\n          \/>\n        ))}\n        <Button type="submit" className="w-full" disabled={signUpMutation.isPending}>\n          {signUpMutation.isPending ? "\ucc98\ub9ac \uc911..." : "\uac00\uc785\ud558\uae30"}\n        <\/Button>\n      <\/form>\n    <\/Form>\n  );\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ \uba54\uc778 \ud398\uc774\uc9c0\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nexport default function Page() {\n  \/\/ Zustand: \uc804\uc5ed \uc0c1\ud0dc \uc77d\uae30\n  const { user, isAuthenticated, logout } = useAuthStore();\n  const { isSignUpModalOpen, openSignUpModal, closeSignUpModal } = useUIStore();\n\n  \/\/ TanStack Query: \uc11c\ubc84 \uc0c1\ud0dc \uc870\ud68c\n  const { data: users, isLoading } = useQuery({\n    queryKey: ["users"],\n    queryFn: fetchUsers,\n  });\n\n  return (\n    <main className="min-h-screen bg-background p-8">\n      <div className="max-w-2xl mx-auto space-y-6">\n\n        {\/* \ud5e4\ub354 *\/}\n        <div className="flex items-center justify-between">\n          <h1 className="text-3xl font-bold text-foreground">\ubaa8\ub358 React \uc2a4\ud0dd<\/h1>\n          <div className="flex items-center gap-3">\n            {isAuthenticated ? (\n              <>\n                <Badge variant="secondary">{user?.name}<\/Badge>\n                <Button variant="outline" onClick={logout}>\ub85c\uadf8\uc544\uc6c3<\/Button>\n              <\/>\n            ) : (\n              <Dialog open={isSignUpModalOpen} onOpenChange={(open) => open ? openSignUpModal() : closeSignUpModal()}>\n                <DialogTrigger asChild>\n                  <Button onClick={openSignUpModal}>\ud68c\uc6d0\uac00\uc785<\/Button>\n                <\/DialogTrigger>\n                <DialogContent>\n                  <DialogHeader>\n                    <DialogTitle>\ud68c\uc6d0\uac00\uc785<\/DialogTitle>\n                  <\/DialogHeader>\n                  <SignUpForm onSuccess={closeSignUpModal} \/>\n                <\/DialogContent>\n              <\/Dialog>\n            )}\n          <\/div>\n        <\/div>\n\n        {\/* \uc0ac\uc6a9\uc790 \ubaa9\ub85d *\/}\n        <Card>\n          <CardHeader>\n            <CardTitle>\uac00\uc785\ud55c \uc0ac\uc6a9\uc790<\/CardTitle>\n            <CardDescription>\n              \ucd1d {users?.length ?? 0}\uba85\n            <\/CardDescription>\n          <\/CardHeader>\n          <CardContent>\n            {isLoading ? (\n              <p className="text-sm text-muted-foreground">\ubd88\ub7ec\uc624\ub294 \uc911...<\/p>\n            ) : (\n              <ul className="divide-y divide-border">\n                {users?.map((u) => (\n                  <li key={u.id} className="flex items-center justify-between py-2">\n                    <div>\n                      <span className="font-medium text-sm text-foreground">{u.name}<\/span>\n                      <span className="text-muted-foreground text-sm ml-2">{u.email}<\/span>\n                    <\/div>\n                    {u.id === user?.id && (\n                      <Badge>\ub098<\/Badge>\n                    )}\n                  <\/li>\n                ))}\n              <\/ul>\n            )}\n          <\/CardContent>\n        <\/Card>\n\n      <\/div>\n    <\/main>\n  );\n}<\/code><\/pre>\n
\n
v4 \ubcc0\uacbd \ud3ec\uc778\ud2b8:<\/strong> text-gray-500<\/code> \u2192 text-muted-foreground<\/code>, bg-gray-50<\/code> \u2192 bg-background<\/code>, border-b<\/code> \u2192 divide-border<\/code> \ub4f1 shadcn \ud14c\ub9c8 \ubcc0\uc218\ub97c \ud65c\uc6a9\ud558\uba74 \ub2e4\ud06c\ubaa8\ub4dc\uac00 \uc790\ub3d9\uc73c\ub85c \ub3d9\uc791\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
\ub77c\uc774\ube0c\ub7ec\ub9ac \uc5ed\ud560 \uc815\ub9ac<\/h2>\n\n\n\n\n\n\n\n\n\n\n
\ub77c\uc774\ube0c\ub7ec\ub9ac<\/th>\n\uc5ed\ud560<\/th>\n\ub2e4\ub8e8\ub294 \uc0c1\ud0dc<\/th>\n<\/tr>\n<\/thead>\n
Tailwind CSS v4<\/strong><\/td>\n\uc720\ud2f8\ub9ac\ud2f0 \uae30\ubc18 \uc2a4\ud0c0\uc77c\ub9c1 (CSS-first \uc124\uc815)<\/td>\n\u2014<\/td>\n<\/tr>\n
shadcn\/ui<\/strong><\/td>\n\uc7ac\uc0ac\uc6a9 \uac00\ub2a5\ud55c UI \ucef4\ud3ec\ub10c\ud2b8 (OKLCH \uc0c9\uc0c1)<\/td>\n\u2014<\/td>\n<\/tr>\n
Zod<\/strong><\/td>\n\uc2a4\ud0a4\ub9c8 \uc815\uc758 + \ud0c0\uc785 \ucd94\ub860<\/td>\n\u2014<\/td>\n<\/tr>\n
React Hook Form<\/strong><\/td>\n\ud3fc \uc0c1\ud0dc + \uc720\ud6a8\uc131 \uac80\uc0ac<\/td>\n\ub85c\uceec(\ud3fc) \uc0c1\ud0dc<\/td>\n<\/tr>\n
TanStack Query<\/strong><\/td>\n\uc11c\ubc84 \ub370\uc774\ud130 \ud328\uce6d + \uce90\uc2f1<\/td>\n\uc11c\ubc84 \uc0c1\ud0dc<\/strong><\/td>\n<\/tr>\n
Zustand<\/strong><\/td>\n\uc804\uc5ed \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc<\/td>\n\ud074\ub77c\uc774\uc5b8\ud2b8 \uc0c1\ud0dc<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\ud83d\udca1 \ud575\uc2ec \uc6d0\uce59<\/strong>: TanStack Query\ub294 \uc11c\ubc84\uc5d0\uc11c \uc624\ub294 \ub370\uc774\ud130\ub97c, Zustand\ub294 UI\uc5d0\ub9cc \uc874\uc7ac\ud558\ub294 \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4. \uc774 \ub458\uc744 \ud63c\uc6a9\ud558\uc9c0 \uc54a\ub294 \uac83\uc774 \uc88b\uc740 \uc124\uacc4\uc785\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
\ucc38\uace0 \uc790\ub8cc<\/h2>\n