프론트에서 서버에 데이터 요청하기 (React로 fetch, axios 사용)

<본 블로그는 라매개발자 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> 프론트에서 서버에 데이터 요청하는 방법 (React로 fetch, axios 사용하기)

 

🚀 SERVER

const express = require("express");
const app = express();

// body-parser
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 데이터를 서버에 저장해놓음 (데이터베이스 생략)
let id = 2;
const todoList = [
  {
    id: 1,
    text: "할일 1",
    done: false,
  },
];

app.get("/", function (res, res) {
  res.send("server");
});

// todolist 조회
app.get("/api/todo", (req, res) => {
  res.json(todoList);
});

// todolist 등록
app.post("/api/todo", (req, res) => {
  // body 에 데이터 넣어 전송
  const { text, done } = req.body;
  todoList.push({
    id: id++,
    text,
    done,
  });
  return res.send("success");
});

app.listen(8080, () => {
  console.log("listen on 8080");
});

 

🌷 todoList 조회하기

 

🌷 todoList 등록하기

 

🚀 CLIENT

 🌷fetch 로 데이터 요청하고 받아옴 client/src/App.js

import { useEffect, useState } from "react";
// 기본 제공하는 api는 fetch
// axios 라이브러리

// 프론트가 서버에 데이터 요청하려면 "서버주소", "http 메소드" 필요
function App() {
  const [todoList, setTodoList] = useState([]);
  useEffect(() => {
    fetchData();
  }, []);

  // fetch 이용하여 데이터 응답 받기
  const fetchData = () => {
    fetch("http://localhost:8080/api/todo")
      .then((response) => response.json())
      .then((data) => setTodoList(data));
  };

  // 데이터 추가하고 서버에 POST 요청
  const onSubmitHandler = (e) => {
    e.preventDefault();
    const text = e.target.text.value;
    const done = e.target.done.checked;
    fetch("http://localhost:8080/api/todo", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        text,
        done,
      }),
    }).then(() => fetchData());
  };

  return (
    <div className="App">
      <h1>TODO LIST</h1>
      <form onSubmit={onSubmitHandler}>
        <input name="text" />
        <input name="done" type="checkbox" />
        <input type="submit" value="추가" />
      </form>
      {/* 조회하는 곳 */}
      {todoList.map((todo) => (
        <div key={todo.id} style={{ display: "flex" }}>
          <div>{todo.id}</div>
          <div>{todo.text}</div>
          <div>{todo.done ? "Y" : "N"}</div>
        </div>
      ))}
    </div>
  );
}

export default App;

 

 🌷axios 로 데이터 요청하고 받아옴 client/src/App.js

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

// 기본 제공하는 api는 fetch
// axios 라이브러리

const SERVER_URL = "http://localhost:8080/api/todo";
// 프론트가 서버에 데이터 요청하려면 "서버주소", "http 메소드" 필요
function App() {
  const [todoList, setTodoList] = useState([]);
  // axios 이용하여 데이터 응답 받기
  const fetchData = async () => {
    // 응답 보내기 -> 응답 오면 setTolist에 넣기
    const response = await axios.get(SERVER_URL);
    setTodoList(response.data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  // 데이터 추가하고 서버에 POST 요청
  const onSubmitHandler = async (e) => {
    e.preventDefault();
    const text = e.target.text.value;
    const done = e.target.done.checked;

    // axios 이용하여 데이터 보내기
    await axios.post(SERVER_URL, { text, done });
    fetchData();
  };

  return (
    <div className="App">
      <h1>TODO LIST</h1>
      <form onSubmit={onSubmitHandler}>
        <input name="text" />
        <input name="done" type="checkbox" />
        <input type="submit" value="추가" />
      </form>
      {/* 조회하는 곳 */}
      {todoList.map((todo) => (
        <div key={todo.id} style={{ display: "flex" }}>
          <div>{todo.id}</div>
          <div>{todo.text}</div>
          <div>{todo.done ? "Y" : "N"}</div>
        </div>
      ))}
    </div>
  );
}

export default App;

 

🌷 react project 설치

 

🌷 프론트가 서버에 데이터 요청하려면 "서버주소", "http 메소드" 필요 => fetch 사용

 

🌷 데이터 가져와서 html 띄우기

코드 참고하삼
https://github.com/gani0325/2023/tree/main/Web/Back_Server