React(82) HTTP 통신 delete 요청보내기 (게시물 삭제)

HTTP 통신에는 크게 4가지 방식의 요청이 있다.

 

게시글을 예로 들어보자

게시글 생성은 POST(create)  요청을 하고,

게시글 수정은 PUT(update)  요청을 하고,

게시글 삭제는 DELETE  요청을 하며, 

게시글 보기는 GET(read)  요청을 한다.

 

오늘 구현해볼 HTTP 요청은 DELETE 이다. 사실 삭제가 제일 쉽긴 하다. 그럼 구현하러 가보자

 

---

React(82) HTTP 통신 delete 요청보내기 (게시물 삭제)

 

Api.ts

여기는 deletePost 함수가 들어있다. http.delete 메소드를 사용한다.

export async function deletePost(id: number): Promise<Error | null> {
  try {
    const res = await http.delete( // delete method 추가
      `${apiUrl}/post/${id}`
    );
    
    if (res.status !== 200) {
      throw new Error(`Response status is "${res.status}"`);
    }
    if (res.data.resultCode !== '0200') {
      throw new Error(`ResultCode is "${res.data.resultCode}"`);
    }

    return null;
  } catch (e) {
    return { error: e };
  }
}

 

 

Post.tsx

여기서는 [삭제하기] 버튼을 누르면 통신함수인 deletePost 가 들어있는 handleDelete 함수가 실행된다.

import { ReactElement } from 'react';
import { Post, deletePost } from 'Api';

interface PostProps {
  postID: number;    // 글 아이디
  postTitle: string; // 글 타이틀
  reload: () => void; // 삭제 후 리로드 함수
}

const Post = (props: PostProps): ReactElement => {

  async function handleDelete(id: number | undefined) { // 여기서 id를 매개변수로 받자
    if (!id) return;

    const err = await deletePost(id); // Api.ts 에서 공수해온 delete 함수에 id 넣어보내기
    if (err) { 	    // 에러시 친절한 예외처리 
      alert("글 삭제가 실패했습니다.") 
      return;
    }
    props.reload(); // 삭제 성공하면 리로드 해주기
  }

  return (
    <div>
       <div className="post-title">{props.postTitle}</div>
       <button
         className="delete-btn"
         onClick={() => handleDelete(props.postID)} // 요 함수 안에 props로 받아온 postID를 넣어주자
       >
         글 삭제하기
       </button>
    </div>
  );
};

export default Post;