[React] 비동기 통신 - axios

240220 TIL 🏃‍♀️

 

 

저번 글에서, 비동기 통신 방법 중 fetch와 axios 가 있다고 소개하고 fetch에 대해 알아봤었다.

fetch는 axios에 비해 불편한 점이 있었는데 (json으로 따로 변환해줘야 하거나 에러 처리 등에 있어서)

axios는 그에 비해 기능적 장점이 있어서, 지금 진행하는 프로젝트나 앞으로 많이 활용해볼 것 같다!

 

 

* Axios 란

node.js와 브라우저를 위한 Promise 기반 http 클라이언트.
http를 이용해서 서버와 통신하기 위해 사용하는 패키지

 

 

- 하지만 자바스크립트에 내장된 fetch와 달리, axios는 패키지 설치를 따로 해줘야 한다. 아래 명령어로 설치해주기!

yarn add axios    혹은    npm install axios

 

 

- 사용하려면 패키지 설치 후 import 해서 쓰면 된다

import axios from "axios";

 

 

 

axios의 메서드

서버의 데이터를 어떻게 할 건지 요청하는 방식에 따라

크게 axios - get, post, patch, delete 방식으로 나눠서 사용해볼 수 있다.

아래 코드와 같이 사용하며, url에 서버 데이터 주소 url (json-server url처럼)을, config에는 기타 여러 설정을 추가 가능.

config에 대해서는 아래의 axios 공식문서를 참고하기!

https://axios-http.com/kr/docs/req_config

 

get - 서버 데이터 조회 요청  (READ)

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

 

post - 서버에 데이터 추가 요청  (CREATE)

axios.post(url[, data[, config]])   // POST

 

patch - (보통) 서버의 특정 데이터 수정 요청  (UPDATE)

axios.patch(url[, data[, config]])  // PATCH

 

delete - 서버에 저장된 데이터 삭제 요청 (DELETE)

axios.delete(url[, config])  // DELETE

 

 

 

- json-server의 서버데이터와 axios를 활용해 다음과 같은 코드를 작성해 볼 수 있다.

(axios.get 활용하기)

강의자료에서 가져온 거긴 하지만 ..ㅎㅎ

투두리스트 만드는 예시코드인데,  axios.get을 통해 json-server 에 있는 데이터를 가져오고 (조회)

useState를 써서 setTodos 도 해준다.  (서버 데이터를 가져와 그 데이터를 todos에 set해주기!)

// src/App.js

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

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;