[Next.js] 글 삭제

Delete를 누르면 글이 삭제가 되도록 코딩해보겠습니다.

그러기 위해서는 Control.js에서 delete버튼 부분을 수정하면 될 것 입니다.

<button onClick={async () => {
const resp = await fetch(`http://localhost:9999/topics/${id}`, {
                  method: "DELETE",
                });
                await resp.json();
                router.push("/");
                router.refresh();
              }}
            >
              delete
            </button>

• await fetch 부분의 코드를 통해 method를 DELETE로 지정하며 서버에 DELETE 요청을 보내 항목을 삭제합니다.
• await.resp.json(); : 서버 응답을 JSON으로 파싱합니다.
• router.push(”/”); router.refresh(); : 삭제 후 홈페이지로 이동하고 페이지를 새로고침합니다.

return함수 위의 코드들을 살펴보겠습니다.

import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
export default function Control() {
  // useRouter 훅을 사용하여 라우터 객체를 가져옵니다.
  const router = useRouter();

  // useParams 훅을 사용하여 현재 경로의 동적 매개변수를 가져옵니다.
  const params = useParams();
  const id = params.id;

• const router = useRouter(); : useRouter 훅을 사용하여 라우터 객체를 가져옵니다.
• const params = useParams(); const id = params.id; : useParams 훅을 사용하여 현재 경로의 동적 매개변수를 가져옵니다.