React는 현재 가장 인기 있는 프론트엔드 라이브러리이며, Next.js는 React 기반의 풀스택 프레임워크로 빠르게 성장하고 있다. 2024년 기준 React 생태계는 Hooks, Server Components, Suspense 등 혁신적인 기능들로 무장했다. 이 글은 React와 Next.js를 활용한 현대적 프론트엔드 개발의 모든 것을 실전 예제와 함께 다룬다.
\nimport { useState, useCallback } from 'react';\n\n// ❌ 잘못된 사용: 클로저 문제\nfunction Counter() {\n const [count, setCount] = useState(0);\n \n const increment = () => {\n // 여러 번 호출 시 예상과 다르게 동작\n setCount(count + 1);\n setCount(count + 1); // count는 여전히 0\n };\n \n return <button onClick={increment}>Count: {count}</button>;\n}\n\n// ✅ 올바른 사용: 함수형 업데이트\nfunction Counter() {\n const [count, setCount] = useState(0);\n \n const increment = useCallback(() => {\n setCount(prev => prev + 1);\n setCount(prev => prev + 1); // 이전 값을 기반으로 업데이트\n }, []);\n \n return <button onClick={increment}>Count: {count}</button>;\n}import { useReducer, useCallback } from 'react';\n\ninterface Todo {\n id: number;\n text: string;\n completed: boolean;\n}\n\ntype TodoAction =\n | { type: 'ADD_TODO'; text: string }\n | { type: 'TOGGLE_TODO'; id: number }\n | { type: 'DELETE_TODO'; id: number }\n | { type: 'CLEAR_COMPLETED' };\n\ninterface TodoState {\n todos: Todo[];\n filter: 'all' | 'active' | 'completed';\n}\n\nconst initialState: TodoState = {\n todos: [],\n filter: 'all'\n};\n\nfunction todoReducer(state: TodoState, action: TodoAction): TodoState {\n switch (action.type) {\n case 'ADD_TODO':\n return {\n ...state,\n todos: [\n ...state.todos,\n {\n id: Date.now(),\n text: action.text,\n completed: false\n }\n ]\n };\n \n case 'TOGGLE_TODO':\n return {\n ...state,\n todos: state.todos.map(todo =>\n todo.id === action.id\n ? { ...todo, completed: !todo.completed }\n : todo\n )\n };\n \n case 'DELETE_TODO':\n return {\n ...state,\n todos: state.todos.filter(todo => todo.id !== action.id)\n };\n \n case 'CLEAR_COMPLETED':\n return {\n ...state,\n todos: state.todos.filter(todo => !todo.completed)\n };\n \n default:\n return state;\n }\n}\n\nfunction TodoApp() {\n const [state, dispatch] = useReducer(todoReducer, initialState);\n \n const addTodo = useCallback((text: string) => {\n dispatch({ type: 'ADD_TODO', text });\n }, []);\n \n const toggleTodo = useCallback((id: number) => {\n dispatch({ type: 'TOGGLE_TODO', id });\n }, []);\n \n const filteredTodos = state.todos.filter(todo => {\n if (state.filter === 'active') return !todo.completed;\n if (state.filter === 'completed') return todo.completed;\n return true;\n });\n \n return (\n <div>\n <input\n type=\"text\"\n onKeyPress={(e) => {\n if (e.key === 'Enter' && e.currentTarget.value) {\n addTodo(e.currentTarget.value);\n e.currentTarget.value = '';\n }\n }}\n placeholder=\"할 일 입력...\"\n />\n <div>\n {filteredTodos.map(todo => (\n <div key={todo.id}>\n <input\n type=\"checkbox\"\n checked={todo.completed}\n onChange={() => toggleTodo(todo.id)}\n />\n <span>{todo.text}</span>\n </div>\n ))}\n </div>\n </div>\n );\n}import { useEffect, useState, useRef } from 'react';\n\nfunction DataFetcher({ userId }: { userId: number }) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const abortControllerRef = useRef<AbortController | null>(null);\n \n useEffect(() => {\n // 이전 요청 취소\n if (abortControllerRef.current) {\n abortControllerRef.current.abort();\n }\n \n // 새로운 AbortController 생성\n abortControllerRef.current = new AbortController();\n const signal = abortControllerRef.current.signal;\n \n setLoading(true);\n \n fetch(`/api/users/${userId}`, { signal })\n .then(res => res.json())\n .then(data => {\n if (!signal.aborted) {\n setData(data);\n setLoading(false);\n }\n })\n .catch(err => {\n if (err.name !== 'AbortError') {\n console.error('Fetch error:', err);\n setLoading(false);\n }\n });\n \n // 클린업 함수: 컴포넌트 언마운트 또는 userId 변경 시 실행\n return () => {\n abortControllerRef.current?.abort();\n };\n }, [userId]); // userId가 변경될 때만 재실행\n \n if (loading) return <div>Loading...</div>;\n if (!data) return <div>No data</div>;\n \n return <div>{JSON.stringify(data)}</div>;\n}import { useState, useEffect, useCallback, useRef } from 'react';\n\n// API 호출을 위한 커스텀 Hook\nfunction useFetch<T>(url: string, options?: RequestInit) {\n const [data, setData] = useState<T | null>(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<Error | null>(null);\n const abortControllerRef = useRef<AbortController | null>(null);\n \n const refetch = useCallback(() => {\n if (abortControllerRef.current) {\n abortControllerRef.current.abort();\n }\n \n abortControllerRef.current = new AbortController();\n const signal = abortControllerRef.current.signal;\n \n setLoading(true);\n setError(null);\n \n fetch(url, { ...options, signal })\n .then(async res => {\n if (!res.ok) {\n throw new Error(`HTTP error! status: ${res.status}`);\n }\n return res.json();\n })\n .then(data => {\n if (!signal.aborted) {\n setData(data);\n setLoading(false);\n }\n })\n .catch(err => {\n if (err.name !== 'AbortError' && !signal.aborted) {\n setError(err);\n setLoading(false);\n }\n });\n }, [url, options]);\n \n useEffect(() => {\n refetch();\n return () => {\n abortControllerRef.current?.abort();\n };\n }, [refetch]);\n \n return { data, loading, error, refetch };\n}\n\n// 사용 예시\nfunction UserProfile({ userId }: { userId: number }) {\n const { data, loading, error, refetch } = useFetch<User>(\n `/api/users/${userId}`\n );\n \n if (loading) return <div>Loading...</div>;\n if (error) return <div>Error: {error.message}</div>;\n if (!data) return <div>No data</div>;\n \n return (\n <div>\n <h1>{data.name}</h1>\n <button onClick={refetch}>새로고침</button>\n </div>\n );\n}\n\n// 로컬 스토리지 동기화 Hook\nfunction useLocalStorage<T>(key: string, initialValue: T) {\n const [storedValue, setStoredValue] = useState<T>(() => {\n try {\n const item = window.localStorage.getItem(key);\n return item ? JSON.parse(item) : initialValue;\n } catch (error) {\n console.error(error);\n return initialValue;\n }\n });\n \n const setValue = useCallback((value: T | ((val: T) => T)) => {\n try {\n const valueToStore = value instanceof Function \n ? value(storedValue) \n : value;\n setStoredValue(valueToStore);\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\n } catch (error) {\n console.error(error);\n }\n }, [key, storedValue]);\n \n return [storedValue, setValue] as const;\n}\n\n// 사용 예시\nfunction Settings() {\n const [theme, setTheme] = useLocalStorage('theme', 'light');\n \n return (\n <select value={theme} onChange={(e) => setTheme(e.target.value)}>\n <option value=\"light\">Light</option>\n <option value=\"dark\">Dark</option>\n </select>\n );\n}import { useMemo, useCallback, memo } from 'react';\n\ninterface Product {\n id: number;\n name: string;\n price: number;\n category: string;\n}\n\nfunction ProductList({ products, filter, onProductClick }: {\n products: Product[];\n filter: string;\n onProductClick: (id: number) => void;\n}) {\n // 필터링된 제품 목록을 메모이제이션\n const filteredProducts = useMemo(() => {\n console.log('Filtering products...');\n return products.filter(product =>\n product.name.toLowerCase().includes(filter.toLowerCase())\n );\n }, [products, filter]);\n \n // 정렬된 제품 목록\n const sortedProducts = useMemo(() => {\n return [...filteredProducts].sort((a, b) => a.price - b.price);\n }, [filteredProducts]);\n \n // 총 가격 계산\n const totalPrice = useMemo(() => {\n return sortedProducts.reduce((sum, product) => sum + product.price, 0);\n }, [sortedProducts]);\n \n return (\n <div>\n <div>총 {sortedProducts.length}개 제품</div>\n <div>총 가격: {totalPrice.toLocaleString()}원</div>\n {sortedProducts.map(product => (\n <ProductItem\n key={product.id}\n product={product}\n onClick={onProductClick}\n />\n ))}\n </div>\n );\n}\n\n// 메모이제이션된 자식 컴포넌트\nconst ProductItem = memo(({ product, onClick }: {\n product: Product;\n onClick: (id: number) => void;\n}) => {\n const handleClick = useCallback(() => {\n onClick(product.id);\n }, [product.id, onClick]);\n \n return (\n <div onClick={handleClick}>\n <h3>{product.name}</h3>\n <p>{product.price.toLocaleString()}원</p>\n </div>\n );\n});Next.js 13+에서는 기본적으로 모든 컴포넌트가 Server Component다. 클라이언트 기능이 필요할 때만 'use client' 지시어를 사용한다.
// app/components/ServerComponent.tsx\n// Server Component (기본값)\nimport { db } from '@/lib/db';\n\nasync function ServerComponent() {\n // 서버에서 직접 데이터베이스 접근\n const data = await db.query('SELECT * FROM products');\n \n return (\n <div>\n <h1>Server Component</h1>\n <ul>\n {data.map(item => (\n <li key={item.id}>{item.name}</li>\n ))}\n </ul>\n </div>\n );\n}\n\n// app/components/ClientComponent.tsx\n'use client'; // 클라이언트 컴포넌트로 명시\n\nimport { useState } from 'react';\n\nexport function ClientComponent() {\n const [count, setCount] = useState(0);\n \n return (\n <div>\n <button onClick={() => setCount(count + 1)}>\n Count: {count}\n </button>\n </div>\n );\n}app/\n layout.tsx # 루트 레이아웃\n page.tsx # 홈 페이지\n loading.tsx # 로딩 UI\n error.tsx # 에러 UI\n not-found.tsx # 404 페이지\n \n products/\n layout.tsx # products 레이아웃\n page.tsx # /products 페이지\n [id]/\n page.tsx # /products/[id] 동적 라우트\n loading.tsx # 로딩 UI\n error.tsx # 에러 UI\n \n api/\n users/\n route.ts # API 라우트// app/layout.tsx\nimport type { Metadata } from 'next';\nimport { Inter } from 'next/font/google';\nimport './globals.css';\n\nconst inter = Inter({ subsets: ['latin'] });\n\nexport const metadata: Metadata = {\n title: 'My App',\n description: 'Next.js 14 App Router Example',\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n <html lang=\"ko\">\n <body className={inter.className}>\n <nav>\n <a href=\"/\">Home</a>\n <a href=\"/products\">Products</a>\n </nav>\n {children}\n </body>\n </html>\n );\n}\n\n// app/products/page.tsx\nimport { Suspense } from 'react';\nimport { ProductList } from '@/components/ProductList';\nimport { ProductListSkeleton } from '@/components/ProductListSkeleton';\n\nexport default function ProductsPage() {\n return (\n <div>\n <h1>Products</h1>\n <Suspense fallback={<ProductListSkeleton />}>\n <ProductList />\n </Suspense>\n </div>\n );\n}\n\n// app/products/[id]/page.tsx\nimport { notFound } from 'next/navigation';\nimport { db } from '@/lib/db';\n\ninterface ProductPageProps {\n params: Promise<{ id: string }>;\n}\n\nexport default async function ProductPage({ params }: ProductPageProps) {\n const { id } = await params;\n const product = await db.product.findUnique({\n where: { id: parseInt(id) }\n });\n \n if (!product) {\n notFound();\n }\n \n return (\n <div>\n <h1>{product.name}</h1>\n <p>{product.description}</p>\n <p>가격: {product.price.toLocaleString()}원</p>\n </div>\n );\n}\n\n// app/products/[id]/loading.tsx\nexport default function Loading() {\n return <div>제품 정보를 불러오는 중...</div>;\n}\n\n// app/products/[id]/error.tsx\n'use client';\n\nimport { useEffect } from 'react';\n\nexport default function Error({\n error,\n reset,\n}: {\n error: Error & { digest?: string };\n reset: () => void;\n}) {\n useEffect(() => {\n console.error(error);\n }, [error]);\n \n return (\n <div>\n <h2>문제가 발생했습니다</h2>\n <button onClick={() => reset()}>다시 시도</button>\n </div>\n );\n}// app/dashboard/page.tsx\nimport { Suspense } from 'react';\nimport { RevenueChart } from '@/components/RevenueChart';\nimport { SalesTable } from '@/components/SalesTable';\nimport { StatsCards } from '@/components/StatsCards';\n\nexport default function DashboardPage() {\n return (\n <div>\n <h1>대시보드</h1>\n \n {/* 즉시 렌더링 */}\n <Suspense fallback={<StatsCardsSkeleton />}>\n <StatsCards />\n </Suspense>\n \n {/* 병렬 로딩 */}\n <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>\n <Suspense fallback={<ChartSkeleton />}>\n <RevenueChart />\n </Suspense>\n \n <Suspense fallback={<TableSkeleton />}>\n <SalesTable />\n </Suspense>\n </div>\n </div>\n );\n}\n\n// app/components/RevenueChart.tsx\nasync function RevenueChart() {\n // 느린 데이터베이스 쿼리\n await new Promise(resolve => setTimeout(resolve, 2000));\n const data = await fetchRevenueData();\n \n return <div>차트 렌더링...</div>;\n}React Query는 서버 상태 관리를 위한 강력한 라이브러리다.
\n// app/providers.tsx\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분\n gcTime: 5 * 60 * 1000, // 5분 (이전 cacheTime)\n refetchOnWindowFocus: false,\n retry: 1,\n },\n },\n })\n );\n \n return (\n <QueryClientProvider client={queryClient}>\n {children}\n <ReactQueryDevtools initialIsOpen={false} />\n </QueryClientProvider>\n );\n}\n\n// hooks/useProducts.ts\nimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';\n\ninterface Product {\n id: number;\n name: string;\n price: number;\n}\n\n// 제품 목록 조회\nexport function useProducts() {\n return useQuery({\n queryKey: ['products'],\n queryFn: async () => {\n const res = await fetch('/api/products');\n if (!res.ok) throw new Error('Failed to fetch products');\n return res.json() as Promise<Product[]>;\n },\n });\n}\n\n// 단일 제품 조회\nexport function useProduct(id: number) {\n return useQuery({\n queryKey: ['products', id],\n queryFn: async () => {\n const res = await fetch(`/api/products/${id}`);\n if (!res.ok) throw new Error('Failed to fetch product');\n return res.json() as Promise<Product>;\n },\n enabled: !!id, // id가 있을 때만 실행\n });\n}\n\n// 제품 생성\nexport function useCreateProduct() {\n const queryClient = useQueryClient();\n \n return useMutation({\n mutationFn: async (newProduct: Omit<Product, 'id'>) => {\n const res = await fetch('/api/products', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(newProduct),\n });\n if (!res.ok) throw new Error('Failed to create product');\n return res.json() as Promise<Product>;\n },\n onSuccess: () => {\n // 제품 목록 캐시 무효화\n queryClient.invalidateQueries({ queryKey: ['products'] });\n },\n });\n}\n\n// 제품 업데이트\nexport function useUpdateProduct() {\n const queryClient = useQueryClient();\n \n return useMutation({\n mutationFn: async ({ id, ...updates }: Partial<Product> & { id: number }) => {\n const res = await fetch(`/api/products/${id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(updates),\n });\n if (!res.ok) throw new Error('Failed to update product');\n return res.json() as Promise<Product>;\n },\n onSuccess: (data) => {\n // 특정 제품 캐시 업데이트\n queryClient.setQueryData(['products', data.id], data);\n // 제품 목록 캐시 무효화\n queryClient.invalidateQueries({ queryKey: ['products'] });\n },\n });\n}\n\n// 사용 예시\n'use client';\n\nimport { useProducts, useCreateProduct } from '@/hooks/useProducts';\n\nfunction ProductsPage() {\n const { data: products, isLoading, error } = useProducts();\n const createProduct = useCreateProduct();\n \n if (isLoading) return <div>Loading...</div>;\n if (error) return <div>Error: {error.message}</div>;\n \n const handleCreate = () => {\n createProduct.mutate(\n { name: 'New Product', price: 10000 },\n {\n onSuccess: () => {\n console.log('Product created!');\n },\n onError: (error) => {\n console.error('Failed to create:', error);\n },\n }\n );\n };\n \n return (\n <div>\n <button onClick={handleCreate} disabled={createProduct.isPending}>\n {createProduct.isPending ? 'Creating...' : 'Create Product'}\n </button>\n <ul>\n {products?.map(product => (\n <li key={product.id}>\n {product.name} - {product.price}원\n </li>\n ))}\n </ul>\n </div>\n );\n}import { useInfiniteQuery } from '@tanstack/react-query';\n\ninterface Post {\n id: number;\n title: string;\n content: string;\n}\n\ninterface PostsResponse {\n posts: Post[];\n nextCursor: number | null;\n}\n\nexport function useInfinitePosts() {\n return useInfiniteQuery({\n queryKey: ['posts', 'infinite'],\n queryFn: async ({ pageParam = 0 }) => {\n const res = await fetch(`/api/posts?cursor=${pageParam}&limit=10`);\n if (!res.ok) throw new Error('Failed to fetch posts');\n return res.json() as Promise<PostsResponse>;\n },\n getNextPageParam: (lastPage) => lastPage.nextCursor,\n initialPageParam: 0,\n });\n}\n\n// 사용 예시\n'use client';\n\nimport { useInfinitePosts } from '@/hooks/useInfinitePosts';\nimport { useIntersectionObserver } from '@/hooks/useIntersectionObserver';\nimport { useRef } from 'react';\n\nfunction InfinitePostsList() {\n const {\n data,\n fetchNextPage,\n hasNextPage,\n isFetchingNextPage,\n } = useInfinitePosts();\n \n const loadMoreRef = useRef<HTMLDivElement>(null);\n \n useIntersectionObserver({\n target: loadMoreRef,\n onIntersect: fetchNextPage,\n enabled: !!hasNextPage,\n });\n \n const posts = data?.pages.flatMap(page => page.posts) ?? [];\n \n return (\n <div>\n {posts.map(post => (\n <article key={post.id}>\n <h2>{post.title}</h2>\n <p>{post.content}</p>\n </article>\n ))}\n \n <div ref={loadMoreRef}>\n {isFetchingNextPage && <div>Loading more...</div>}\n {!hasNextPage && <div>No more posts</div>}\n </div>\n </div>\n );\n}export function useLikePost() {\n const queryClient = useQueryClient();\n \n return useMutation({\n mutationFn: async (postId: number) => {\n const res = await fetch(`/api/posts/${postId}/like`, {\n method: 'POST',\n });\n if (!res.ok) throw new Error('Failed to like post');\n return res.json();\n },\n onMutate: async (postId) => {\n // 진행 중인 쿼리 취소\n await queryClient.cancelQueries({ queryKey: ['posts', postId] });\n \n // 이전 값 백업\n const previousPost = queryClient.getQueryData(['posts', postId]);\n \n // 낙관적 업데이트\n queryClient.setQueryData(['posts', postId], (old: any) => ({\n ...old,\n likes: old.likes + 1,\n isLiked: true,\n }));\n \n return { previousPost };\n },\n onError: (err, postId, context) => {\n // 에러 시 롤백\n if (context?.previousPost) {\n queryClient.setQueryData(['posts', postId], context.previousPost);\n }\n },\n onSettled: (data, error, postId) => {\n // 최종적으로 서버 데이터로 동기화\n queryClient.invalidateQueries({ queryKey: ['posts', postId] });\n },\n });\n}import { create } from 'zustand';\nimport { devtools, persist } from 'zustand/middleware';\n\ninterface BearState {\n bears: number;\n increase: (by: number) => void;\n decrease: (by: number) => void;\n}\n\nexport const useBearStore = create<BearState>()(\n devtools(\n persist(\n (set) => ({\n bears: 0,\n increase: (by) => set((state) => ({ bears: state.bears + by })),\n decrease: (by) => set((state) => ({ bears: state.bears - by })),\n }),\n {\n name: 'bear-storage', // localStorage 키\n }\n ),\n { name: 'BearStore' } // Redux DevTools 이름\n )\n);\n\n// 사용 예시\nfunction BearCounter() {\n const bears = useBearStore((state) => state.bears);\n const increase = useBearStore((state) => state.increase);\n \n return (\n <div>\n <h1>{bears} bears around here...</h1>\n <button onClick={() => increase(1)}>Add bear</button>\n </div>\n );\n}import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';\nimport { atomWithStorage } from 'jotai/utils';\n\n// 기본 atom\nconst countAtom = atom(0);\n\n// 파생 atom\nconst doubledCountAtom = atom((get) => get(countAtom) * 2);\n\n// 비동기 atom\nconst userAtom = atom(async () => {\n const res = await fetch('/api/user');\n return res.json();\n});\n\n// localStorage와 동기화\nconst themeAtom = atomWithStorage('theme', 'light');\n\n// 사용 예시\nfunction Counter() {\n const [count, setCount] = useAtom(countAtom);\n const doubled = useAtomValue(doubledCountAtom);\n \n return (\n <div>\n <p>Count: {count}</p>\n <p>Doubled: {doubled}</p>\n <button onClick={() => setCount(c => c + 1)}>Increment</button>\n </div>\n );\n}import { lazy, Suspense } from 'react';\n\n// 동적 import로 컴포넌트 레이지 로딩\nconst HeavyComponent = lazy(() => import('./HeavyComponent'));\nconst ChartComponent = lazy(() => import('./ChartComponent'));\n\nfunction App() {\n const [showChart, setShowChart] = useState(false);\n \n return (\n <div>\n <Suspense fallback={<div>Loading component...</div>}>\n <HeavyComponent />\n </Suspense>\n \n {showChart && (\n <Suspense fallback={<div>Loading chart...</div>}>\n <ChartComponent />\n </Suspense>\n )}\n \n <button onClick={() => setShowChart(true)}>Show Chart</button>\n </div>\n );\n}import Image from 'next/image';\n\nfunction OptimizedImage() {\n return (\n <Image\n src=\"/hero.jpg\"\n alt=\"Hero image\"\n width={800}\n height={600}\n priority // 우선 로딩\n placeholder=\"blur\" // 블러 플레이스홀더\n blurDataURL=\"data:image/jpeg;base64,...\"\n sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n />\n );\n}# Next.js 번들 분석\nnpm install @next/bundle-analyzer\n\n# next.config.js\nconst withBundleAnalyzer = require('@next/bundle-analyzer')({\n enabled: process.env.ANALYZE === 'true',\n});\n\nmodule.exports = withBundleAnalyzer({\n // Next.js 설정\n});\n\n# 분석 실행\nANALYZE=true npm run build// app/api/users/route.ts\nimport { NextRequest, NextResponse } from 'next/server';\nimport { db } from '@/lib/db';\n\nexport async function GET(request: NextRequest) {\n const searchParams = request.nextUrl.searchParams;\n const page = parseInt(searchParams.get('page') || '1');\n const limit = parseInt(searchParams.get('limit') || '10');\n \n const users = await db.user.findMany({\n skip: (page - 1) * limit,\n take: limit,\n });\n \n return NextResponse.json({ users });\n}\n\nexport async function POST(request: NextRequest) {\n const body = await request.json();\n \n const user = await db.user.create({\n data: body,\n });\n \n return NextResponse.json(user, { status: 201 });\n}// app/actions/user.ts\n'use server';\n\nimport { revalidatePath } from 'next/cache';\nimport { db } from '@/lib/db';\nimport { z } from 'zod';\n\nconst createUserSchema = z.object({\n name: z.string().min(1),\n email: z.string().email(),\n});\n\nexport async function createUser(formData: FormData) {\n const rawData = {\n name: formData.get('name'),\n email: formData.get('email'),\n };\n \n // 유효성 검사\n const validatedData = createUserSchema.parse(rawData);\n \n // 데이터베이스에 저장\n const user = await db.user.create({\n data: validatedData,\n });\n \n // 캐시 무효화\n revalidatePath('/users');\n \n return { success: true, user };\n}\n\n// 사용 예시\n'use client';\n\nimport { createUser } from '@/app/actions/user';\nimport { useTransition } from 'react';\n\nfunction UserForm() {\n const [isPending, startTransition] = useTransition();\n \n async function handleSubmit(formData: FormData) {\n startTransition(async () => {\n const result = await createUser(formData);\n if (result.success) {\n console.log('User created:', result.user);\n }\n });\n }\n \n return (\n <form action={handleSubmit}>\n <input name=\"name\" placeholder=\"Name\" required />\n <input name=\"email\" type=\"email\" placeholder=\"Email\" required />\n <button type=\"submit\" disabled={isPending}>\n {isPending ? 'Creating...' : 'Create User'}\n </button>\n </form>\n );\n}React와 Next.js는 현대적 웹 개발의 핵심 기술이다. 이 글에서 다룬 내용:
\n이러한 기술들을 조합하면 확장 가능하고 유지보수하기 쉬운 프론트엔드 애플리케이션을 구축할 수 있다.
\n