React

[TIL/React] 2023/05/24

2. 웹 요청 처리하기 🔴 a) 비동기 작업 처리 & Promise 🟠 redux-thunk를 사용하여 비동기 작업을 처리하려 한다. 라는 라이브러리를 이용하여 웹 요청을 할 것이다. axios는 이다. 는 ES6에서 비동기 처리를 다루기 위해 사용되는 이다.

2023년 5월 24일4min read

2. 웹 요청 처리하기 🔴

a) 비동기 작업 처리 & Promise 🟠

redux-thunk를 사용하여 비동기 작업을 처리하려 한다. ``axios`라는 라이브러리를 이용하여 웹 요청을 할 것이다. axios는 `Promise 기반 HTTP Client``이다.

Promise```는 ES6에서 비동기 처리를 다루기 위해 사용되는 ```객체```이다. 크롬 개발자 도구에서 다음 코드를 실행해 봤다.


![](https://velog.velcdn.com/images/minkwan/post/c74e86c6-c7c2-4c6f-baf5-c7b860750b8d/image.png)

1초 뒤에 '숫자 1'이 프린트되었다.

다음으로, 1초에 걸쳐서 숫자를 더해가면서 1, 2, 3, 4를 프린트하는 코드를 작성했다.

![](https://velog.velcdn.com/images/minkwan/post/3f23715b-c1a8-4cd3-bec5-3d719c658cb3/image.png)

비동기적으로 처리해야 할 작업이 많아지면, 코드의 구조가 깊어져서 가독성을 떨어뜨리는 결과로 이어진다. 소위 '콜백 지옥'이라고 불리는 현상이다. 이러한 문제를 해결하는 가장 유효한 방식 중 하나가 바로 'Promise'이다.

![](https://velog.velcdn.com/images/minkwan/post/330add1e-33bd-4bfc-b117-c1a4a65b913c/image.png)

코드의 깊이가 일정하다는 점을 확인할 수 있다.

Promise는 비동기 작업의 결과를 나타내는 객체이다.

Promise는 비동기 작업의 결과에 따라 처리할 수 있다. 작업이 성공하면 '.then()' 메서드를 사용하여 이행된 상태의 결과를 처리할 수 있고, 작업이 실패하면 '.catch()' 메서드를 사용하여 거부된 상태의 오류를 처리할 수 있다.

![](https://velog.velcdn.com/images/minkwan/post/a8266373-b23b-495f-87b8-79fcddbe5898/image.png)

### b) axios 사용해보기 🟠

**axios 설치**

yarn add axios