[비동기통신 axios.get 요청] json-server API 명세서 확인

 Axios 설치하기
CRA를 통해서 새로운 프로젝트를 생성하고,  터미널에 아래의 명령어를 입력해서 axios를 설치합니다.
yarn add axios

json-server 설정
📌
API 서버는 우리가 만든 json-server를 사용합니다. 배포는 하지 않아도 되고, 한 프로젝트 내에서 3001   포트로 서버를 가동시켜 사용합니다.
(1) 테스트용 db.json 설정
 json-server 의 데이터를 아래와 같이 설정했습니다.

{
  "todos": [
    {
      "id": "1",
      "title": "react"
    }
  ]
}
// 설치하기 
yarn json-server --watch db.json --port 4000

(1) Axios get
get은 서버의 데이터를 조회할 때 사용합니다.  기본적인 사용방법은 아래와 같습니다. 
// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
// config는 axios 공식문서에서 확인하세요.

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

// src/App.js

// json-server에 있는 todos를 axios를 이용해서 fetching하고 useState를 통해서 관리하는 로직입니다. 

import React, { useEffect, useState } from "react";
import axios from "axios"; // axios import 합니다.

const App = () => {
  const [todos, setTodos] = useState(null);

	// axios를 통해서 get 요청을 하는 함수를 생성합니다.
	// 비동기처리를 해야하므로 async/await 구문을 통해서 처리합니다.
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:3001/todos");
    setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set 합니다.
  };
	
	// 생성한 함수를 컴포넌트가 mount 됐을 떄 실행하기 위해 useEffect를 사용합니다.
  useEffect(() => {
		// effect 구문에 생성한 함수를 넣어 실행합니다.
    fetchTodos();
  }, []);

	// data fetching이 정상적으로 되었는지 콘솔을 통해 확인합니다.
  console.log(todos); // App.js:16
  return <div>App</div>;
};

export default App;