목록2026/01/17 (1)

키모스토리

Next.js Server Actions: <form action>로 CRUD 만들기 (메모리 DB 예시)

Next.js 16(App Router) 기준으로, Server Action이 객체를 return하고 그 결과를 useActionState로 UI에 바로 반영하는 “등록/삭제 + 목록 조회” 전체 예시입니다.(메모리 DB 사용)목표메모리 DB: { id, title, comment, createdAt }목록 조회: Server Component에서 렌더등록/삭제: + useActionState액션 결과: { ok, message }를 return → 화면에 메시지 표시액션 후 목록 갱신: revalidatePath("/memos")1) 메모리 DB 실서비스에서는 DB(Postgres/MSSQL 등)로 바뀌지만, 개념 설명엔 메모리 DB가 가장 직관적입니다./lib/memo-db.tsexport type..
Web Devlopment/NextJs 2026. 1. 17. 19:27
이전 Prev 1 Next 다음