본문 바로가기

Legacy(~18.10)/React && React Native

[React / React Naive TIPS] axios 와 fetch 어떤 것을 사용할까?

반응형

[React / React Naive TIPS] axios 와 fetch 어떤 것을 사용할까?

* 해당 글은 구글 검색 'what difference fetch axios' 라고 검색했을 때 나오는 1 페이지의 내용을 기반으로 제 생각이 첨가되어 작성되었습니다.

react, react-native 에서 API 로 부터 데이터를 받아올 때, fetch, axis 등을 사용하는데,

이것들은 무엇이고? 왜 이걸 써야 하는지? 성능은 무엇이 좋은지? 그래서 사용법은 어떤지에 대해서 알아본다.

구글링 검색을 했을 때, 나오는 글들을 종합 하였을 때, 종합해보면 fetch, axios 에 대한 특징은 다음과 같다


Axios

1. 사용하기 좀 더 편리하다. -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? 사용하기 쉽게? 만들려고 노력한 흔적이 보인다.(는 아래 코드를 통해서 확인)

2. fetch 에는 존재하지 않는 기능이 좀 더 많다.

3. Promise based


Fetch

1. 라이브러리를 import 하지 않아도 사용할 수 있다.

2. React Native 의 경우에 업데이트가 잦기 때문에, 라이브러리(예를들면, axios 같은 것들..)이 이 업데이트를 쫓아오지 못하는 경우가 생기는데, Fetch 는 이걸 걱정할 필요 없이 사용 가능

3. Promise based

4. Request Aborting 에 대해서 표준적인 방법을 제공해 주지 못함.

5. 네트워크 에러가 발생했을 때, 계속 기다려야됨 -> response timeout API 제공이 안됨.

6. 지원하지 않는 브라우저가 있다.

7. Error handling 관련해서 문제가 좀 있다.

- Catch 에 걸렸을 때, 이후 .then( ~~~ )을 실행한다.

- axios 의 경우엔 .then(~~~)을 실행하지 않고, console 창에 해당 에러로그를 보여준다.



결론

1. 둘다 쓰는데 무리 없고, 잘 동작 하나, axios 는 주로 react, fetch 는 react native 에 사용한다.(React-native 의 빠른 업데이트 때문에 ..Quora 에 답변 다신 어떤분 개인 의견)

2. 전체적으로 이 둘은 비슷하나, axios 가 조금 더 장점이 많다. 동시에 fetch 의 단점도 꽤나 존재한다.

3. fetch 가 좀더 가볍고 axios 가 상대적으로 좀 더 무거운 느낌(제공하는 기능이 더 많다.)

4. 요청 취소를 위해선 fetch 가 아닌 axios 등의 다른 라이브러리 사용이 필요하다.



코드 비교 (출처 - https://stackoverflow.com/questions/40844297/what-is-difference-between-axios-and-fetch)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept''application/json',
                'Content-Type''application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

cs>

<Fetch JSON post request>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept''application/json',
                'Content-Type''application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}


<Axios JSON post request>

  • 코드 자체는 비슷비슷하다. 용어의 차이 객체로 넘기는지 혹은 string 해서 넘기는지 등등 중요 부분만 비교를 해보자면,
  • fetch request 함수는 response 객체가 ok 프로퍼티를 포함하는 것으로 정상적인 요청/응답을 체크하고, axios status 값이 200 인지와 statusText 통해서 확인한다.
  • fetch response 객체에 .json() 메소드를 호출하여서 json 객체를 얻고, axios response 객체의 data property 접근함으로써 얻는다.
  • 생각에는 위의 fetch, axios 차이점을 고려했을 , 거의 비슷하지만, axios 사용자를 배려해준다고 느꼈다.

    최종 결론

    • 간단한 http 요청에는 Fetch 써도 상관없지만, axios 비교했을 axios 장점, fetch 단점이 부각 되기 때문에 많은 기능이 필요할 때는 axios 쓰는게 좋을 같다 허나 React-Native 경우엔 업데이트를 라이브러리가 따라가지 못할 수도 있기 때문에, fetch 쓰는게 좋을 수도 있다..근데 이왕 axios 쓸거면 axios 익숙해 지도록 계속 axios 쓰는 것도 나쁘지 않을 같다.




반응형