axios 이용해서 API 연동하기

fetch를 이용하는 방법만 해봤었는데 fetch는 지원하지않는 브라우저가 많아서 axios를 사용하는게 좋다고 한다.
fetch와 사용법이 크게 다르지 않다.

1. axios 라이브러리 설치하기

yarn add axios

2. 데이터 조회하는 기본 문법

import axios from 'axios';
axios.get('api주소입력);

3. async와 await 이용해서 데이터 로딩하기

- 데이터를 활용하기 위해선 값을 받아와야하는데 자바스크립트는 비동기언어이기 때문에 별다른 처리 없이 값을 받아올 경우 데이터가 조회되기 전 값이 전달되어 null이 주어지게 된다.
- 데이터가 조회된 후에 값을 받아올 수 있도록 비동기처리를 해주어야 한다. (async, await 이용)

const getData = async () => {
  const data = await axios.get('api주소입력);
}

4. useState와 useEffect 이용해서 데이터 로딩하기

- useEffect에 첫번째 파라미터로 등록하는 함수에는 async를 사용 할 수 없기 때문에 함수 내부에서 async를 사용하는 새로운 함수를 선언해주어야 한다.
- try, catch를 이용해 데이터를 받아오지못했을 때 오류메세지를 띄워준다.

function Users() {
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        // 요청이 시작 할 때 작업할 내용
        setError(null);
        setUsers(null);
        setLoading(true);
        const response = await axios.get(
          'api주소'
        );
        setUsers(response.data);
      } catch (e) {
      	// 오류발생시 작업할 내용
        setError(e);
      }
      setLoading(false);
    };
   
    fetchUsers();
  }, []);
...
}

👩 강의 코드는 따라 만들어보면서 이해했다고 생각했는데 막상 직접 써보려니 잘 안되고 왜 안되는지 알 수가 없어 답답했다. 환율계산기를 만드는 프로젝트에서 환율정보를 api로 받아와야 했는데 받아온 데이터를 다른 컴포넌트에 전달하는 과정에서 어려움을 겪었다.

👩 api폴더를 따로 만들어 async await를 이용해 비동기처리를 해준 뒤 전달받은 데이터를 리턴해줬고, 메인페이지에서 import 해서 데이터를 전달받는 방식이었는데 문제는 '메인페이지에서 데이터를 전달 받을때도 비동기처리를 해줘야하는가?' 에 대한 의문이었다.

👩 다른 분들이 작업했던 내용을 보고 데이터를 받을 때도 async를 이용해야 한다고 판단해 그렇게 진행했지만 처음값이 null로 찍히는 오류가 발생했다.

👩 그래서 async를 사용하지않고 받아오려고하니 이것도 오류가 나고.. 계속 이것저것 다르게 해보았지만 어느부분이 잘못된건지 알 수가 없어서 일단 api폴더를 이용하지않고 메인에서 api를 받아와 진행했다.

---

👩 마침 생활코딩에서 이번에 콜백관련 영상이 새로 올라와 보고왔다.
async를 사용한 함수는 promise를 반환한다. 그래서 데이터를 받아올 때도 async를 이용해 받아오는 것이 맞는 것 같다.
강의를 보고 지난번 코드에 다시 api파일에서 데이터를 받아오는방식으로 수정해보았는데 정상작동 한다. 이게 제일 처음 진행했던 방식인데 그땐 왜 안됐던걸까.. 오타가 있었나ㅠ
프로미스관련해서 제대로 이해하지 못하고 모르는 부분이 많은 것 같다. 이번 기회에 제대로 정리하면서 이해해봐야겠다.