24.09.04 json-server / axios DELETE, PATCH

DELETE 요청

delete 명령은 아래와 같이 하면 된다.

const BASE_URL = "http://localhost:4000";

const onDeleteHandler = async (id) => {
    await axios
        .delete(BASE_URL + `/todos/${id}`)
        .then(({ data }) => setTodos(todos.filter((todo) => todo.id !== data.id)));
};

좀 더 json-server에서 제공해주는 Routes와 비교하기 쉽게 base url을 분리해놓았다.

 

{todos?.map((el) => {
    return (
        <li key={el.id}>
            <span>{el.title}</span>
            <button onClick={() => onDeleteHandler(el.id)}>삭제</button>
        </li>
    );
})}

DELETE

---

PATCH 요청

<input
    type="text"
    placeholder="수정하고 싶은 todoId"
    onChange={(e) => {
        setTargetId(e.target.value);
    }}
/>
<input
    type="text"
    placeholder="수정할 값 입력"
    onChange={(e) => {
        setEditTodo({ ...editTodo, title: e.target.value });
    }}
/>
<button type="button" onClick={(e) => onEditHandler(e, targetId, editTodo)}>
    수정하기
</button>

특정 id를 가진 todo를 수정하고, 해당 todo의 title을 어떻게 바꿀것인지 입력할 input을 생성한다.

 

이전과 동일하게 json-server와 axios에서 제공하는 형태로 PATCH 요청을 보낸다.

const [targetId, setTargetId] = useState();
const [editTodo, setEditTodo] = useState({
    title: "",
});
const onEditHandler = async (e, targetId, editTodo) => {
    e.preventDefault();
    await axios.patch(BASE_URL + `/todos/${targetId}`, editTodo).then(({ data }) =>
        setTodos(
            todos.map((todo) => {
                return todo.id === data.id ? data : todo;
            })
        )
    );
};

 

PATCH

---

전체 코드

import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {
    const [todos, setTodos] = useState(null);
    const [targetId, setTargetId] = useState();
    const [editTodo, setEditTodo] = useState({
        title: "",
    });
    const [todo, setTodo] = useState({
        title: "",
    });

    const BASE_URL = "http://localhost:4000";

    const onSubmitHandler = async (todo) => {
        await axios.post(BASE_URL + "/todos", todo).then(({ data }) => setTodos([...todos, data]));
    };
    const onDeleteHandler = async (id) => {
        await axios
            .delete(BASE_URL + `/todos/${id}`)
            .then(({ data }) => setTodos(todos.filter((todo) => todo.id !== data.id)));
    };
    const onEditHandler = async (e, targetId, editTodo) => {
        e.preventDefault();
        await axios.patch(BASE_URL + `/todos/${targetId}`, editTodo).then(({ data }) =>
            setTodos(
                todos.map((todo) => {
                    return todo.id === data.id ? data : todo;
                })
            )
        );
    };
    useEffect(() => {
        const fetchPost = async () => {
            try {
                const { data } = await axios.get(BASE_URL + "/todos");
                setTodos(data);
            } catch (error) {
                console.log("error :>> ", error);
            }
        };
        fetchPost();
    }, []);

    return (
        <div style={{ margin: "50px" }}>
            <h3>async / await 연습</h3>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    onSubmitHandler(todo);
                }}
            >
                <div>
                    <input
                        type="text"
                        placeholder="수정하고 싶은 todoId"
                        onChange={(e) => {
                            setTargetId(e.target.value);
                        }}
                    />
                    <input
                        type="text"
                        placeholder="수정할 값 입력"
                        onChange={(e) => {
                            setEditTodo({ ...editTodo, title: e.target.value });
                        }}
                    />
                    <button type="button" onClick={(e) => onEditHandler(e, targetId, editTodo)}>
                        수정하기
                    </button>
                </div>
                <input type="text" onChange={(e) => setTodo({ ...todo, title: e.target.value })} />
                <button type="submit">추가하기</button>
            </form>
            <ul>
                {todos?.map((el) => {
                    return (
                        <li key={el.id} style={{ margin: "10px 0px" }}>
                            <span>id: {el.id}</span>
                            <span> / </span>
                            <span>title: {el.title}</span>
                            <button onClick={() => onDeleteHandler(el.id)}>삭제</button>
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default App;