[Next.js] api example

pages/api/items.js

 

let items = [] // 메모리에 저장 (DB 대체)

// API 라우트
export default function handler(req, res) {
  if (req.method === "GET") {
    // READ: 모든 아이템 조회
    res.status(200).json(items)
  } else if (req.method === "POST") {
    // CREATE: 아이템 추가
    const newItem = { id: Date.now(), ...req.body }
    items.push(newItem)
    res.status(201).json(newItem)
  } else if (req.method === "PUT") {
    // UPDATE: 아이템 수정
    const { id, text } = req.body
    items = items.map((item) =>
      item.id === id ? { ...item, text } : item
    )
    res.status(200).json({ id, text })
  } else if (req.method === "DELETE") {
    // DELETE: 아이템 삭제
    const { id } = req.body
    items = items.filter((item) => item.id !== id)
    res.status(200).json({ id })
  } else {
    res.setHeader("Allow", ["GET", "POST", "PUT", "DELETE"])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

 

frontend

pages/index.js

import { useState, useEffect } from "react"

export default function Home() {
  const [items, setItems] = useState([])
  const [text, setText] = useState("")

  // 데이터 불러오기
  useEffect(() => {
    fetch("/api/items")
      .then((res) => res.json())
      .then(setItems)
  }, [])

  // CREATE
  const addItem = async () => {
    if (!text.trim()) return
    const res = await fetch("/api/items", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text }),
    })
    const newItem = await res.json()
    setItems([...items, newItem])
    setText("")
  }

  // UPDATE
  const updateItem = async (id) => {
    const newText = prompt("수정할 내용을 입력하세요:")
    if (!newText) return
    await fetch("/api/items", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, text: newText }),
    })
    setItems(items.map((item) => (item.id === id ? { ...item, text: newText } : item)))
  }

  // DELETE
  const deleteItem = async (id) => {
    await fetch("/api/items", {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id }),
    })
    setItems(items.filter((item) => item.id !== id))
  }

  return (
    <div style={{ padding: "20px" }}>
      <h1>📋 간단한 CRUD 예제</h1>

      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="할 일을 입력하세요"
      />
      <button onClick={addItem}>추가</button>

      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.text}{" "}
            <button onClick={() => updateItem(item.id)}>수정</button>
            <button onClick={() => deleteItem(item.id)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  )
}