[React] 비동기 통신 axios(post)

POST 요청

 

import axios from "axios";
import "./App.css";
import { useEffect } from "react";
import { useState } from "react";

function App() {
  const [todos, setTodos] = useState(null);
  const [inputValue, setInputValue] = useState({
    title: "", // title 을 입력하는 것 이므로 title 값을 넣어줌.
  });

  const fetchTodos = async () => {
    // 서버로부터 값 요청, 비동기
    const { data } = await axios.get("http://localhost:4000/todos"); // 서버로부터 값을 받을때 까지 기다림
    console.log("data", data);
    // setTodos([...todos, inputValue]); // 값 추가는 되나 id 값을 늦게 불러오므로 아래와 같이 다시 fetch
    fetchTodos(); // 다시 값을 읽어와서 id 값을 부여함.
  };

  const onSubmitHandler = async () => {
    // 무슨 값을 post 로 보낼 것인가에 대한 async, 여기서는 값을 따로 가져오는게 아니므로 없어도 무방
    axios.post("http://localhost:4000/todos", inputValue);
    setTodos([...todos, inputValue]); // 기존 값에 추가해서 map으로 뿌려준 후 렌더링
  };

  useEffect(() => {
    // 마운트 되었을 때 실행할 로직, db로부터 값을 가져올 것이다.
    fetchTodos();
    return () => {
      // 언마운트 되었을 때 리턴할 값
    };
  }, []); // 어떤 state 가 변경될 때, 실행하는지 결정
  return (
    <>
      <div>
        <h1>인풋 영역</h1>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            onSubmitHandler();
          }}
        >
          <input // post하기 위한 인풋값
            type="text"
            value={inputValue.title}
            onChange={(e) =>
              setInputValue({
                title: e.target.value,
              })
            }
          />
          <button type="submit">추가</button>
        </form>
      </div>
      <div>
        <h1>데이터 영역</h1>
        {todos?.map((todo) => {
          return (
            <div id={todo.id}>
              {todo.id} : {todo.title}
            </div>
          );
        })}
      </div>
    </>
  );
}

export default App;