Axios로 서버에 http 요청 보내기

1. axios를 설치한 후 import한다.

npm i axios

 

import axios from "axios";

 

2. 버튼에 event handler를 등록하고, 그 안에서 axios로 http 요청을 보낸다.

// event handler
const handleAdd = async () => {
    await axios.post("https://react-todo-server-donghwan.koyeb.app/add", {
      task,
    });
    const result = await axios.get(
      "https://react-todo-server-donghwan.koyeb.app/get"
    );
    console.log(result);
    setTodos(result.data);
    inputRef.current.value = "";
    inputRef.current.focus();
};

// todo form
<div className="create_form">
    <input
      type="text"
      placeholder="Enter task"
      ref={inputRef}
      onChange={(e) => setTask(e.target.value)}
    />
    <button onClick={handleAdd}>Add</button>
</div>

 

// API 내용

app.get("/get", async (req, res) => {
  const todos = await Todo.find({});
  console.log("/get 호출");
  console.log(todos);
  res.json(todos);
});

app.post("/add", async (req, res) => {
  const task = req.body.task;
  const todos = await Todo.create({ task: task });
  console.log("/add 호출");
  console.log(todos);
  res.json(todos);
});

 

3. server에서 cors를 설치한 후 미들웨어를 사용한다.

npm i cors

const cors = require("cors");

app.use(cors());