본문은 라매개발자 강의 프론트에서 서버에 데이터 요청하는 방법 (React로 fetch, axios 사용하기)를 기반으로 작성되었습니다.
이제 진짜 다왔다. fetch로 한 것과 같은 동작을 하도록 axios로 구현해보자.
axios는 ajax 등의 웹 통신 기능을 제공하는 라이브러리이다.
ajax: 비동기 데이터 전송 기술이다. 원래는 Asynchronous JavaScript and XML의 약자로, avaScript와 XML을 이용한 비동기 데이터 전송 기술을 가리키는 말이었다. XML은 데이터 교환 양식인데, 최근에는 XML보다 JSON 형태를 많이 사용한다.
웹 통신: 서버와 클라이언트 간의 통신으로, 주로 http 프로토콜을 통해 이루어진다. GET, POST, PUT, DELETE, PATCH 등이 자주 사용된다.
Axios의 장점은 아래와 같다.
아직 무슨 말인지 잘 모르겠다. 직접 써보자!
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 : 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 : 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로 쓰기도 하던데 함 해볼까 (노션광인)
하루라도 더 젊을 때 이것저것 많이 해봐야지...