원활한 삭제 기능을 구현하기 위해 DELETE method API를 비동기로 호출할 때 로딩상태, 결과 값 등을 받을 수 있도록 재사용성 있는 hook을 제작하려고합니다.

 

## 🛠 useDelete hook을 만들어봅시다!

좋은 삭제 기능을 만들기 위해서는 무엇이 필요할까요?
저는 삭제 기능을 원활하게 실행하는 **함수**, 삭제 중임을 알 수 있는 **로딩 상태**, 삭제가 잘 완료 되었는지 확인할 수 있는 **삭제 결과**가 필요하다고 생각합니다.
 
> hook 만들기
```ts
import { useState } from "react";
import { APIResponse } from "types/response";

type Params = { [k: string]: string | number };

export default function useDelete(
 uri: string
): [(params?: Params) => Promise<void>, boolean, APIResponse | null] {
 const [isLoading, setIsLoading] = useState<boolean>(false);
 const [response, setResponse] = useState<APIResponse | null>(null);

 async function onDelete(params?: Params) {
 // 삭제 api 호출
 }

 return [onDelete, isLoading, response];
}
```

useDelete hook의 기본 틀을 완성하였습니다. useDelete hook을 사용하면 기본적으로 api를 호출하기 위해 uri를 입력해야합니다. 그렇게 useDelete를 사용하면 순서대로 [삭제 함수, 삭제 로딩 상태, 삭제 결과]를 반환 받습니다.
 
>onDelete함수로 api호출 하기
```ts
async function onDelete(params?: Params) {
 setIsLoading(true);
 // api 호출
 setIsLoading(false);
}
```
onDelete를 자세히 작성해보겠습니다. api를 호출하기 위해서는 uri와 query가 필요한데 우리는 useDelete hook을 처음 사용할 때 uri를 입력해 주었기 때문에 query를 입력해야한다면 onDelete함수를 호출할 때 매개변수로 넘겨주어야합니다. 그리고 비동기로 api를 호출했을 때 로딩 상태를 알기 위해 loading 값을 수정하도록 setIsLoading을 사용해주었습니다.
 
```ts
async function onDelete(params?: Params) {
 setIsLoading(true);
 try {
 let queryStr = "";
 // parmas가 있다면 api 호출 시 query를 같이 전달하기 위해 query 폼에 맞게string 자료형으로 변경해줍니다. 여러개의 parmas가 입력되어도 처리하기 위해 반복문을 사용합니다.
 if (params) {
 let isFirst = true;
 for (const key in params) {
 if (!isFirst) queryStr += "&";
 queryStr += `${key}=${params[key]}`;
 if (isFirst) isFirst = false;
 }
 }
 
 // onDelete 호출 시 매개변수가 있으면 query를 넘겨 api를 호출합니다.
 const res = await (
 await fetch(`${params ? uri + "?" + queryStr : uri}`, {
 method: "DELETE",
 })
 ).json();
 setResponse(res);
 } catch (error) {
 setResponse({ result: false });
 }
 setIsLoading(false);
}
```
tryCatch문을 사용하여 알수 없는 오류 발생 시 실패 결과를 반환하도록 하였으며 fetch를 사용하여 api를 정상적으로 호출하면 api 호출 결과값을 반환하도록 했습니다.
 
>완성된 useDelete hook
```ts
import { useState } from "react";
import { APIResponse } from "types/response";

type Params = { [k: string]: string | number };

export default function useDelete(
 uri: string
): [(params?: Params) => Promise<void>, boolean, APIResponse | null] {
 const [isLoading, setIsLoading] = useState<boolean>(false);
 const [response, setResponse] = useState<APIResponse | null>(null);

 async function onDelete(params?: Params) {
 setIsLoading(true);
 try {
 let queryStr = "";
 if (params) {
 let isFirst = true;
 for (const key in params) {
 if (!isFirst) queryStr += "&";
 queryStr += `${key}=${params[key]}`;
 if (isFirst) isFirst = false;
 }
 }
 const res = await (
 await fetch(`${params ? uri + "?" + queryStr : uri}`, {
 method: "DELETE",
 })
 ).json();
 setResponse(res);
 } catch (error) {
 setResponse({ result: false });
 }
 setIsLoading(false);
 }

 return [onDelete, isLoading, response];
}
```

 
이렇게 삭제 기능을 만들기 위해 useDelete hook을 완성했습니다. 간단한 사용 방법을 설명하고 마치겠습니다.
 
>hook 사용하기
```ts
const [postDelete, postDeleteLoading, postDeleteResponse] = useDelete('/api/post')
```

 
>삭제 하기
```ts
<button type="button" onClick={() => {
 if(postDeleteLoading) return // 이미 삭제 진행중이면 리턴
 postDelete({id:post.id}) // query로 postId를 넘기기 위해 매개변수 입력
 }}>
</button>
```

 
>결과값에 따른 이벤트
```ts
useEffect(() => {
 if(postDeleteResponse?.result) {
 alert("포스트 삭제에 성공했습니다.");
 }
 if(!postDeleteResponse?.result) {
 alert("포스트 삭제에 실패했습니다");
 }
}, [postDeleteResponse])
```

원활한 삭제 기능을 구현하기 위해 DELETE method API를 비동기로 호출할 때 로딩상태, 결과 값 등을 받을 수 있도록 재사용성 있는 hook을 제작하려고합니다.

 

## 🛠 useDel

DELETE method API를 호출하기 위한 useDelete hook 만들기