[React] Axios

프로젝트 코드를 보면 Axios라는 것을 사용하고 있다.

 

'근데 문득 드는 생각이 왜 Axios를 쓰게 됐나? Fetch API도 있는데'

 

그럼 Axios와 Fetch의 차이점을 알아보자.

	Axios	Fetch API
설치 여부	필요	불필요
Json 변환	자동으로 변환	수동으로 변환
네트워크 에러 발생 시	기본적으로 처리가 잘 되어 있음	수동으로 처리해야함

 

이거보다 더한 차이점도 있을거라고 생각을 하지만, Axios가 조금 . 더 편리하고 사용하기 쉽다는 것을 알 수 있다.

그래서 프로젝트 기간에는 Axios를 선택해서 한 것 같다.

 

결론적으로는, Axios와 Fetch 둘 다 HTTP 요청을 통해 사용하게 되고, Axios가 사용하기 편리하다.

 

Axios 사용법

Axios를 사용하기 위해서는 메소드에 따라 요청하는 방법이 다르다. 표를 통해 확인해보자.

	설명
Get	데이터 조회
Post	데이터 생성
Put	데이터 완전 수정
Patch	데이터 부분 수정
Delete	데이터 삭제

 

다음으로는 Axios 코드 예제를 살펴보자.

import axios from 'axios'

...

useEffect(() => {
                axios.get(`/api/personal/picks/${userId}`)
                        .then(response => {
                                setPickData(response.data);
                        })
                        .catch(error => {
                                console.log("pickData 호출 실패: " + error);
                        });
        }, [userId]);
        
...

 

Axios 쓰게 된다면 이러한 형태로 쓰게 된다.

 

만약, 여기서 Get 요청이 아닌 Post, Put을 사용하게 된다면 axios.get 부분을 axios.post, axios.put 메소드를 사용하면 되고 그 뒤에 HTTP 주소를 입력하여 데이터 처리를 요청하면 된다.