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

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

TIL : Today I learned

목록 보기
8/10
post-thumbnail

본문은 라매개발자 강의 프론트에서 서버에 데이터 요청하는 방법 (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;

😎 느낀 점 및 이후 공부 방향

와! 아무렇지 않게 썼지만 delete 할때 생각보다 삽질을 많이 했다.
알고 보니 delete 끝에 return res.send('success')를 안해줘서였다.
역시 코딩은 삽질로 시작해서 삽질로 끝나는...

여기서 db 연결만 하면 적당히 폼 제출받고 데이터에 저장하고 하는 건 할 수 있을 것 같은데... db연결도 배워보고 싶다.
노션을 db로 쓰기도 하던데 함 해볼까 (노션광인)
하루라도 더 젊을 때 이것저것 많이 해봐야지...

profile
코드를 짭니다...

0개의 댓글