여러 가지 글을 올릴 수 있는 게시판을 만들고 있는데 어떤 특정 게시글을 삭제하고 싶은 경우가 있다.
백엔드 데이터베이스 역할을 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('/')
를 통해서 최초 페이지로 라우팅 시켜준다.