[React] Axios로 Express 서버와 연동하기 (4) fetch를 axios로 바꾸기

쥬롬의 코드착즙기·2022년 11월 7일

React axios

TIL : Today I learned

목록 보기

8/10

본문은 라매개발자 강의 프론트에서 서버에 데이터 요청하는 방법 (React로 fetch, axios 사용하기)를 기반으로 작성되었습니다.

📌Axios

이제 진짜 다왔다. fetch로 한 것과 같은 동작을 하도록 axios로 구현해보자.

🤔 Axios란?

axios는 ajax 등의 웹 통신 기능을 제공하는 라이브러리이다.

ajax: 비동기 데이터 전송 기술이다. 원래는 Asynchronous JavaScript and XML의 약자로, avaScript와 XML을 이용한 비동기 데이터 전송 기술을 가리키는 말이었다. XML은 데이터 교환 양식인데, 최근에는 XML보다 JSON 형태를 많이 사용한다.
웹 통신: 서버와 클라이언트 간의 통신으로, 주로 http 프로토콜을 통해 이루어진다. GET, POST, PUT, DELETE, PATCH 등이 자주 사용된다.

Axios의 장점은 아래와 같다.

response timeout 처리 방법이 있다.
promise 기반으로 다루기 쉽다.
JSON 자동 Stringify가 가능하다.
브라우저 호환성이 좋다.

아직 무슨 말인지 잘 모르겠다. 직접 써보자!

✅ GET

GET: axios.get(url[, config])

fetch() get이랑 같은 기능을 한다.
비동기 처리를 위해 fetch()를 axios로 고치기만 해줘도 되지만
더 나은 가독성을 위해 async, await 문법으로 바꿔주었다.

  const fetchData= async()=>{
    const response = await axios.get(SERVER_URL)
    setTodoList(response.data)
    console.log("fetched");
  }

✅ POST

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

fetch() post랑 같은 동작을 한다.
그러나 fetch()를 이용할 때는 method도 post라고 지정해줘야 하고, json stringify도 해줘야 하고... 다소 귀찮다.
axios는 그런 거 없다.
코드가 너무 깔끔해졌다!

  const onSubmitHandler = async(e)=>{
    e.preventDefault();
    const text=e.target.text.value;
    const done = e.target.done.checked;
    await axios.post(SERVER_URL, {text, done});
    fetchData();
  }

✅ (추가) DELETE

삭제 기능도 쉽게 할 수 있을 것 같아서 한번 만들어 봤다.

DELETE : axios.delete(url[, config])

기본형은 위와 같지만 특정 데이터를 지우려면 axios.delete(url,{data:{d}}[, config])처럼 붙이기만 하면 된다.

일단 return문 안의 map으로 나타나는 각 투두 요소에 버튼을 추가하고...

{todoList.map((todo)=>(
        <div id={todo.id}>
          <div>{todo.id}</div>
          <div>{todo.text}</div>
          <div>{todo.done ? 'Y' : 'N'}</div>
          <button id={todo.id} onClick={deleteData}>삭제</button> //버튼추가!
        </div>
      ))}

deleteData 함수를 써 준다.


  const deleteData= async(e)=>{
    const removeid=e.target.id; // e는 삭제 button 객체이다.
    const data = await axios.delete(SERVER_URL, {data: {removeid}});
    console.log(data);
    fetchData();
  }

그리고 서버로 가서 delete 처리를 해주자.
server/app.js

app.delete('/api/todo',(req,res)=>{
    const id = req.body.removeid;
  	//body를 뜯어 보니 {removeid: 1} 이런 형태로 온다
    todoList = todoList.filter(todo=>todo.id!=id);
    return res.send('success');
})

그럼 끝! 이제 삭제도 된다.

📌 전체 코드

server/app.js

const express = require('express')
const app = express()
const cors = require('cors')
const bodyParser = require('body-parser')

 app.use(cors());

app.use(bodyParser.json()) // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

let id=2;
let todoList = [{
    id: 1,
    text:"todo1",
    done: false,
},];

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.get('/api/todo',(req,res)=>{
    res.json(todoList);
})

app.post('/api/todo',(req,res)=>{
    const {text, done} = req.body; //body에 text와 done을 담아보냄
    todoList.push({
        id: id++,
        text,
        done,
    });
    return res.send('success');
})

app.delete('/api/todo',(req,res)=>{
    const id = req.body.removeid;
    console.log("data:", id);
    todoList = todoList.filter(todo=>todo.id!=id);
    console.log(todoList);
    return res.send('success');
})

app.listen(4000,()=>{
    console.log("server start!");
})

client/App.js

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

const SERVER_URL = 'http://localhost:4000/api/todo'

function App() {
  const [todoList, setTodoList] = useState([]);

  const fetchData= async()=>{
    const response = await axios.get(SERVER_URL)
    setTodoList(response.data)
    console.log("fetched");
  }
  useEffect(() => {
    fetchData();
  }, [])

  const deleteData= async(e)=>{
    //const response = await axios.get(SERVER_URL)
    //const newres=(response.data.filter(res=>res.id!=e.target.id));
    const removeid=e.target.id;
    const data = await axios.delete(SERVER_URL, {data: {removeid}});
    console.log(data);
    fetchData();
  }

  const onSubmitHandler = async(e)=>{
    e.preventDefault();
    const text=e.target.text.value;
    const done = e.target.done.checked;
    await axios.post(SERVER_URL, {text, done});
    fetchData();
  }

  return (
    <div className="App">
      <h1>TODO LIST</h1>
      <form onSubmit={onSubmitHandler}>
        <input name="text" type="text"/>
        <input name="done" type="checkbox"/>
        <input value="추가" type="submit"/>
      </form>
      {todoList.map((todo)=>(
        <div id={todo.id}>
          <div>{todo.id}</div>
          <div>{todo.text}</div>
          <div>{todo.done ? 'Y' : 'N'}</div>
          <button id={todo.id} onClick={deleteData}>삭제</button>

        </div>
      ))}
    </div>
  );
}

export default App;