🫧Axios 패키지 설치

• node.js와 브라우저를 위한 Promise기반 HTTP클라이언트
• yarn add axios json-server

🫧테스트 데이터 생성

📁 db.json

{
  "todos": [
    {
      "id": 1,
      "title": "react"
    }
  ]
}

🫧data 읽어오기

• react는 3000번, db는 4000번으로 읽을 것이다.
  json-server --watch db.json --port 4000

• 데이터를 가져온다.
  📁 App.jsx

import { useEffect } from "react";
import "./App.css";
import axios from "axios";

function App() {

  const fetchTodos = async () => {
    const response = axios.get("http://localhost:4000/todos")
  }

  useEffect(() => {
    //db로부터 값을 가져올 것이다

  }, [])
  return <div>AXIOS</div>;
}

export default App;

🫧json-server

• json서버를 이용하는 방식이 정해져 있다.
  
  
• path, query 방법을 적절하게 적용하여 사용한다.
• 서버와 통신한다는것이 비동기 통신을 한다는것이다.
• 제어권이 나에게 없다.

🫧response 출력

📁 App.jsx

import { useEffect } from "react";
import "./App.css";
import axios from "axios";

function App() {

  const fetchTodos = async () => {
    const response = axios.get("http://localhost:4000/todos")
    console.log('response', response)
  }

  useEffect(() => {
    // db로부터 값을 가져올 것이다
    // 로딩될 때 db정보를 가져온다.
    fetchTodos();
  }, [])
  return <div>AXIOS</div>;
}

export default App;

• axios 요청을 한 직후에 콘솔이 찍혀서 promise로 출력된다.
• 응답을 받을 때 까지 기다려야한다. (await 추가)

• await 추가

📁 App.jsx

import { useEffect } from "react";
import "./App.css";
import axios from "axios";

function App() {

  const fetchTodos = async () => {
    const response = await axios.get("http://localhost:4000/todos")
    console.log('response', response)
  }

  useEffect(() => {
    // db로부터 값을 가져올 것이다
    // 로딩될 때 db정보를 가져온다.
    fetchTodos();
  }, [])
  return <div>AXIOS</div>;
}

export default App;

🫧data 가져오기

📁 App.jsx

const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    console.log(data);
  };

🫧data 추가

📁 db.json

{
  "todos": [
    {
      "id": 1,
      "title": "react"
    },
    {
      "id": 2,
      "title": "node"
    },
    {
      "id": 3,
      "title": "spring"
    }
  ]
}

🫧todos 나타내기

📁 App.jsx

  return (
    <div>
       {todos ? (
        todos.map((item) => (
          <div key={item.id}>
            {item.id} : {item.title}
          </div>
        ))
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );