생활코딩

Coding Everybody

삭제 기능 구현

토픽 생활코딩 > WEB > WEB2 - JavaScript > React > Next.js 13

소스코드

https://github.com/egoing/nextapp/commit/d3d1d4f9749250065f7032f939acb01a1bb9af3a

절차

1. app/Control.js 수정

"use client";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";

export function Control() {
  const router = useRouter();
  const params = useParams();
  const id = params.id;
  return (
    <ul>
      <li>
        <Link href="/create">create</Link>
      </li>
      {id ? (
        <>
          <li>
            <Link href={`/update/${id}`}>update</Link>
          </li>
          <li>
            <button onClick={async ()=>{
              const resp = await fetch(`http://localhost:9999/topics/${id}`, {
                method: 'DELETE',
              });
              await resp.json();
              router.push('/');
              router.refresh();
            }}>delete</button>
          </li>
        </>
      ) : null}
    </ul>
  );

댓글

댓글 본문
  1. 삭제까지 완료!
  2. mediumryan
    CRUD 기준으로 알아듣기 쉬운 강의였습니다.
    완강했으니 이제 직접 만들어봐야겠네요.