axios로 CRUD 요청하기

to do 앱 만들기 과제를 하면서 axios로 fetch를 하게끔 코드를 작성했다. 이번 기회에 crud 요청 관련한 부분들을 정리해 보았다. 

 

axios 공식문서에서 요청 메소드 명령어는 다음과 같이 나와있다.

 

1. Read

axios.get(url[, config])

 

🔽 코드 예제

  const { REACT_APP_SERVER_URL: URL } = process.env;
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    async function getData() {
      try {
        const res = await axios.get(URL);
        setTodos(res.data); // (*)
      } catch (error) {
        console.error(error);
      }
    }
    getData();
  }, []);

(*) 응답 데이터가 {data: ...} 에 담겨서 오기 때문에 res가 아닌 res.data로 받아와야 한다. 

 

2. Create

axios.post(url[, data[, config]])

 

🔽 코드 예제

  const [inputValue, setInputValue] = useState("");
  const { REACT_APP_SERVER_URL: URL } = process.env;

  const handleInput = (e) => {
    setInputValue(e.target.value);
  };

  const addTodo = () => {
    if (inputValue === "") return;
    const newTodo = {
      text: inputValue,
      done: false,
      important,
    };
    axios.post(URL, newTodo);
    window.location.reload(); // 페이지 새로고침
  };

json server를 사용하고 있어서 서버 쪽에서 새로운 데이터에 대한 id를 자동 생성해주고 있다. post의 경우, id가 반영된 데이터를 화면에 바로 뿌려주기 위해 setState로 관리해주지 않고, 페이지 새로고침을 하는 코드를 넣어두었다. 

 

 

3. Update

axios.patch(url[, data[, config]])

 

🔽 코드 예제 : url 경로에 /path까지 들어가야 한다.

  const handleImportant = () => {
    const target = todos.find((todo) => todo.id === id);
    const updated = { important: !target.important };
    axios.patch(`${URL}/${id}`, updated);
    
    const updatedTodos = todos.map((todo) => {
      if (todo.id === target.id) {
        target.important = !target.important;
        return target;
      } else return todo;
    });
    setTodos(updatedTodos);
  };

 

4. Delete

axios.delete(url[, config])

 

🔽 코드 예제 : url 경로에 /path까지 들어가야 한다.

  const deleteTodo = () => {
    axios.delete(`${URL}/${id}`);
    
    const updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  };

 

 

 

📚 참고자료

Axios API | Axios Docs