Next.js 13 - 16. 글 삭제

글 삭제

이번엔 삭제를 구현해보자.

Control.tsx 파일에서 onClick 이벤트를 추가해주고 fetch를 작성해주자. 삭제 메소드를 추가하기 위해 option을 따로 설정해주자. 테스트하면 글을 선택하고 삭제버튼을 눌렀을 때 삭제가 됐고 refresh를 하면 삭제가 잘 된 걸 확인할 수 있다.

 

그럼 삭제한 경우 데이터가 사라진 것이니까 루트로 이동하도록 처리하자. 이를 위해서는 router가 필요하다. 삭제가 끝나면 push해서 루트로 이동하고 서버 컴포넌트들을 다 refresh를 해야하니까 router.refresh도 처리해주자.

 

// /src/app/Control.tsx

'use client';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
export function Control() {
  const params = useParams();
  const router = useRouter();
  const id = params.id;
  return (
    <ul>
      <li>
        <Link href='/create'>Create</Link>
      </li>
      {id ? (
        <>
          <li>
            <Link href={`/update/${id}`}>Update</Link>
          </li>
          <li>
            <input
              type='button'
              value={'delete'}
              onClick={() => {
                const options = { method: 'DELETE' };
                fetch(`http://localhost:9999/topics/${id}`, options)
                  .then((resp) => resp.json())
                  .then((result) => {
                    router.push('/');
                    router.refresh();
                  });
              }}
            />
          </li>
        </>
      ) : null}
    </ul>
  );
}

 

---

참고자료

생활코딩 - Next.js 13

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating

Data Fetching: Fetching, Caching, and Revalidating | Next.js