React axios 사용 예시

React에서 Rest Api를 쉽게 호출하기 위해 axios 라이브러리를 사용하게 되었습니다.

화면을 Component 단위로 나누었고 Api를 호출할 때마다 header에 인증 권한인 Authorization을 함께 넣어줘야 했는데 예시를 찾기 쉽지 않아 상당히 헤맸습니다.

따라서 간단한 사용 예시를 기록하고자 합니다.

현재 배워나가는 단계이기 때문에 비교적 최근에 나온 개념인 훅(hooks)를 최대한 활용했고 Class Component 방식이 아닌 함수형 Component 방식을 사용해 코드를 작성했습니다.

참고로, 프론트는 React, 백은 SpringBoot 프레임워크를 사용하여 개발했습니다.

 

저 같은 경우 메인 화면에 접근하기 전에 requestParam으로 전달된 토큰을 기반으로 인증 Api에 get 방식으로 호출하여 response.headers.authorization을 반환받아 해당 Authorization을 headers에 담아야지만 정상적으로 Api를 찌를 수 있도록 작성했습니다.

 

우선, axios를 사용하기 위해서는 아래와 같이 yarn을 통해 axios 라이브러리를 다운로드 받아야합니다.

yarn add axios

 

이어서 requestParam을 통해 전달받은 토큰을 기반으로 인증 Api에 get 방식으로 호출하는 코드 예시입니다.

인증에 성공했다면 Main 페이지, 실패했다면 에러 페이지를 띄우도록 작성했습니다.

또한, authorization을 다른 컴포넌트에 전달해줘야 하기 때문에 context를 통해 전달해줬습니다.

 

JWT(Json Web Token)을 이용하여 권한을 확인하기 때문에 context를 통해 전달받은 토큰 앞에 `Bearer `를 붙여서 header에 넣고 API를 찔렀습니다.

아래는 간단한 예시입니다.

[react 버전] 16.13.1

[개발 환경] 윈도우, VsCode, STS