TIL35-04 비동기 통신 - axios, fetch

비동기 통신 - axios, fetch

1. Axios

• 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지다.
• 터미널에 아래의 명령어를 입력해서 axios를 설치한다.

yarn add axios

• 연습 : json-server 설정 후 테스트용 db.json을 설정하고 진행한다.

2. GET

1) Axios get

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

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

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

• axios 공식 문서 : https://axios-http.com/kr/docs/req_config
  2) 예시 코드

// 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();
  }, []);
  return <div>App</div>;
};

export default App;

3. POST

• 서버에 데이터를 추가할 때 사용한다.

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

• post 요청에 대한 로직은 BE 개발자가 구현하는 것이기 때문에 추가외에 다른 용도로 사용될 수 있다.
• 보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용한다.

const onSubmitHandler = async () => {
        axios.post('http://localhost:4000/todos', inputValue);
        fetchTodos(); //2번의 fetchTodo를 통해 추가 된 데이터를 다시 받아와서 화면에 렌더링 시켜준다.
    };

4. DELETE

• 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용한다.

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

const onDeleteButtonHandler = async (id) => {
  axios.delete(`http://localhost:4000/todos/${id}`);
        setTodos(
            todos.filter((item) => {
                return item.id !== id;
            }) 
        );
    };```

### 5. PATCH
- 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 매서드다. 
- http 환경에서 서로가 한 약속이자 문맥이기 때문에, 수정을 하고자 반드시 patch, put을 써야만 하는 것은 아니다. 
- BE에 의해서 POST를 통해서 "수정"이라는 기능은 충분히 만들 수 있기 때문이다.
```jsx
axios.patch(url[, data[, config]])  // PATCH

 const onUdateButtonClickHandler = async () => {axios.patch(`http://localhost:4000/todos/${targetId}`, 
	 {title: desc,});
        setTodos(
            todos.map((item) => {
                if (item.id == targetId) {
                    return { ...item, title: desc };
                } else {
                    return item;
                }
            })
        );
    };

6. env

• env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다.
  https://tooo1.tistory.com/582

7. Fetch

Fetch는 ES6부터 도입된 Javascript 내장 라이브러리다.
Promise 기반 비동기 통신 라이브러리다. axios처럼 데이터를 다루기 쉽고, 내장 라이브러리이기 때문에 별도의 설치 및 import를 필요로 하지 않다.
하지만 fetch가 가진 단점 때문에 Axios를 쓴다.

• 미지원 브라우저 존재
• 개발자에게 불친절한 response
• axios에 비해 부족한 기능