axios 2

React 비동기 통신 중 로딩 스피너 띄우기

React axios를 활용하여 api를 호출하면 자바스크립트의 ajax처럼 서버와 비동기 통신을 하는데, 딜레이 시간 동안 로딩 화면 혹은 로딩 모달을 띄우는 방법에 대해 소개드리겠습니다. 저는 비동기 통신 딜레이 시간 동안 스피너를 띄우기 위해 react-loading 라이브러리를 사용했습니다. yarn 혹은 npm 을 통해 다운 받아주시면 됩니다. yarn add react-loading 메시지와 함께 스피너를 화면 중앙에 띄워주기 위해 저는 아래와 같이 코드를 작성했습니다. 태그에 주목해주세요. Loader.js * 저 같은 경우에는 별도 페이지를 만들었지만 html과 css를 다룰줄 아시는 분들은 Spinner 모달을 만들고 loading state가 true일 때 해당 모달을 띄우는 방법을 사..

[DEV] 기록 2020.05.17

React axios 사용 예시

React에서 Rest Api를 쉽게 호출하기 위해 axios 라이브러리를 사용하게 되었습니다. 화면을 Component 단위로 나누었고 Api를 호출할 때마다 header에 인증 권한인 Authorization을 함께 넣어줘야 했는데 예시를 찾기 쉽지 않아 상당히 헤맸습니다. 따라서 간단한 사용 예시를 기록하고자 합니다. 현재 배워나가는 단계이기 때문에 비교적 최근에 나온 개념인 훅(hooks)를 최대한 활용했고 Class Component 방식이 아닌 함수형 Component 방식을 사용해 코드를 작성했습니다. 참고로, 프론트는 React, 백은 SpringBoot 프레임워크를 사용하여 개발했습니다. 저 같은 경우 메인 화면에 접근하기 전에 requestParam으로 전달된 토큰을 기반으로 인증 Ap..

[DEV] 기록 2020.04.23