[React]json-server 에 delete 요청하기

여러 가지 글을 올릴 수 있는 게시판을 만들고 있는데 어떤 특정 게시글을 삭제하고 싶은 경우가 있다.

백엔드 데이터베이스 역할을 json-server 가 대신 해주는 환경에서 json-server에 delete를 요청해서 데이터베이스에서 해당 게시글을 삭제하는 방법에 대해서 알아볼 것이다.

json-server 환경에 대해서는 이전 포스팅을 참고하면 된다.

const BlogDetails = () => {
  const { id } = useParams();
  const { data: blog, error, isPending } = useFetch(
    "http://localhost:8000/blogs/" + id
  );
  const history = useHistory();	//삭제후 홈으로 돌아가기 위함

  const handleClick = () => {
    fetch("http://localhost:8000/blogs/" + blog.id, {
      method: "DELETE",
    }).then(() => {
      history.push("/");	//history를 이용해 홈으로 라우팅
    });
  };

  return (
    <div className="blog-details">
      {isPending && <div>Loading...</div>}
      {error && <div>{error}</div>}
      {blog && (
        <article>
          <h2>{blog.title}</h2>
          <p>Written by {blog.author}</p>
          <div>{blog.body}</div>
          <button onClick={handleClick}>delete</button>
        </article>
      )}
    </div>
  );
};

우선 블로그 상세화면에서 해당 게시글을 삭제할 수 있는 버튼을 다음과 같이 추가한다 <button onClick={handleClick}>delete</button>.

그 후에 삭제 버튼을 눌렀을 때 handleClick 함수가 실행되는데 이 함수 안에서 fetch 함수를 사용해서 json-server 에 요청을 보낸다. 첫 번째 매개변수로 endpoint를 설정하는데 해당 게시글에 부합하는 endpoint로 접근을 해야 해당 게시글에 대한 데이터를 읽어와서 삭제할 것이다. 그래서 json-server의 기본 endpoint에다가 blog.id 를 추가해줘야 한다. 두 번째 매개변수로 객체를 전달하는데 method: "DELETE" 를 객체 프로퍼티로 넣어준다.

이렇게 하면 해당 데이터가 삭제된다. 그 후에 then을 이용해서 history.push('/') 를 통해서 최초 페이지로 라우팅 시켜준다.

출처:

• https://www.youtube.com/watch?v=Wb-0CkLiyQk