React :: fetch()로 서버에서 데이터 삭제하기

서버에 Delete Request를 보내보자!

 

코드를 브라우저에서만 돌릴때는, useState를 활용해서 데이터를 넣고, 삭제했다. 그냥 로컬에 있는 데이터 배열의 값을 변경시켜 주는것이므로 간단했는데, 서버와 연결 된 상태에서는 어떻게 delete 기능을 구현할 수 있을까!

 

토이프로젝트에서는 fetch를 통해 데이터를 받아오고, 전송한는 create 기능과 read 기능은 구현이 되어있다.

이번에는 fetch를 통해 delete 기능을 구현 해 볼것이다.

return (

    <div className={classes.contents}>

      <div className={classes.title_area}>

        <h2>{post.title}</h2>

        <span>{post.date}</span>

      </div>

      <div className={classes.body_area}>

        <p>{post.body}</p>

      </div>

      <p>

        <button>수정</button>

        <button onClick={e=>{

          //삭제로직!

        }}>삭제</button>

      </p>

    </div>

  );

}

위 코드는 내가 만들고있는 프로젝트의 게시글 상세보기 컴포넌트다.

삭제버튼에 onClick 이벤트로 삭제로직이 작동되게 할건데, function을 따로 만들어야 할지 인라인을 넣을지 고민됐는데,

개인적으로는 function을 따로 만드는것이 더 깔끔해서 좋긴하지만 ..2개이상의 버튼에서 작동할 기능이 아니기 때문에 그괜히 메모리만 잡아먹게 되니 비추천. 한 버튼에서만 쓰이고, 중첩되지 않는 기능은 그냥 인라인으로 넣어주자.

 

          <button className={classes.buttons}

            onClick={(e) => {

              fetch("http://localhost:3000/posts/" + post.id, {

                method: "DELETE",

              })

                .then((response) => {

                  if (!response.ok) {

                    throw new Error("Error");

                  }

                  navigate("..");

                })

                .catch((e) => {

                  console.log(e);

                });

            }}

          >

            삭제

          </button>