리액트 심화2 - Axios

 

1. Axios

 

- Axios란?

axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트.

다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하면 됨

 

- Axios 설치하기

yarn add axios

 

2. json-server 설정

API 서버는 우리가 만든 json-server를 사용.

배포는 하지 않아도 되고, 한 프로젝트 내에서 3001 포트로 서버를 가동시켜 사용.

 

- 테스트용 db.json 설정

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

 

3. Get

 

- Axios get

get은 서버의 데이터를 조회할 때 사용.

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
// config는 axios 공식문서에서 확인하세요.

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

 

- 사용하는 json-server API 명세서 확인하기

 

Axios는 GET 요청을 할 수 있도록 도와주는 패키지일 뿐이지,

“어떻게 요청을 해야하지?” 와 같은 방식에 대한 확인은 우리가 사용할 API 명세서를 보아야 함.

GET 요청을 할 때 path variable로 해야할지, query로 보내야할지는 API를 만든 사람이 하라는대로 해야 하기 때문.

 

json-server의 공식문서를 보면, 전체 정보나 상세 정보는 path variable 로 url을 작성하면 됨.

 

그리고 filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query로 보내라고 명시하고 있음.

 

- 코드로 알아보기

 

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

// src/App.js

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;