Axios

: 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

사용 방법

axios 모듈 설치

npm install axios --save

axios.get()

Ex) axios.get('https://api.themoviedb.org/3/trending/all/week')
=> 이것은 themoviedb 사이트 내 영화 데이터베이스 사용하는 주소

인스턴스 생성

axios.js

baseurl로 axios get요청하기 위한 js파일 작성

이외에도 api key와 언어 등 설정

requests.js

baseurl로 get요청 설정한 axios 기반 데이터 주소에 따른 부가적 데이터 요청 받기 위한 js 작성

axios import

axios 모듈 사용할 컴포넌트에 import문 작성 필요

axios get 요청

비동기 요청으로 async 키워드 선언

get 요청 부분에서는 await 키워드 선언

콘솔 로그로 데이터가 제대로 잘 들어왔는지 확인

잘 들어왔으면 이전에 useState로 선언한 변수에 setState로 할당

get 요청 응용

요청하는 문법은 기본 형식과 동일

요청해 받은 데이터 중 랜덤한 하나의 id를 가져오는 방법으로 Math.random 사용

요청한 데이터의 객체 구조를 파악하여 배열을 가져오는 경로 파악 (request/data/results)

이에 대한 길이로 .length

랜덤값 반환 함수 Math.random()에 곱하여 0~20까지 반환

소숫 점 까지 반영하는 랜덤값을 올림 함수로 정수로 반환 -> Math.floor