탕구리's 블로그

이번 포스팅에서는 React에서 비동기 API를 사용하는 방법에 대해서 알아보겠습니다. 상태 관리에 대해서는 앞에서 배운 Redux를 활용하여 진행하고 비동기 처리를 위해 Redux 미들웨어인 Thunk를 사용합니다. 미들웨어 없이 비동기 처리를 시도해보았으나 안 되는 것 같아서 미들웨어를 사용하게 되었습니다. 비동기 API 예제를 만들어보자! 우선, 만들고자 하는 기능은 아래 이미지와 같습니다. 동작 과정 1. 버튼에 클릭하면 API를 발생시킵니다. 2. 비동기로 동작하기 떄문에 API 요청에 대한 결과가 오기 전에는 "Loading" 문구를 화면에 랜더링 해줍니다. 3. 비동기 요청이 완료된 경우 데이터를 화면에 랜더링 해줍니다. 4. 에러가 발생한 경우에는 "error"를 화면에 랜더링 해줍니다. ..