[React.Js] 리액트 AXIOS 사용하기 / API 데이터 Fetch하기

자바스크립트에서 API를 연동하기 위해서는 보통 fetch API 를 사용한다. 리액트도 자바스크립트 라이브러리 중 하나이기때문에 fetch를 사용해서 API 데이터를 비동기 통신을 할 수 있다.

하지만 많은 사람들이 리액트를 쓸 땐 Axios를 더 많이 사용하는 것 같다.

API데이터를 받아오기 위해서 axios를 써보자!

 

 

#Axios 다운받기

1️⃣ cmd 혹은 코드에디터 터미널을 이요해서 axios를 다운받습니다

npm i axios

설치가 잘 되었는지 확인하고 싶다면 Package.json 을 클릭해보시면 확인하실 수 있어요. 안에 axios가 있다면 설치완료!

 

2️⃣코드를 쓰고 있는 파일에 import 해주기

axios를 쓸 곳에 꼭 import를 해줘야 쓸 수 있답니다 

 

3️⃣axios를 쓰는데, method는 총 4개가 있습니다 ‘GET’, ‘POST’, ‘DELETE’, ‘PUT’

‘GET’

데이터를 요청하는 url에서 정보를 받아낸답니다. 그렇기 때문에 받아온 정보를 바꾸지는 못합니다

 

제가 쓴 코드는 useState와 useEffect를 써야해서 axios를 감싸고 있는 상황입니다. 자바스크립트는 json 으로 변경해주고 해야하지만 json 형태로 바로 응답합니다

 

‘POST’

url에 새로운 리소스를 생성할 때 이용합니다. 예를 들면 로그인이라던가 회원가입이라던가

 

‘DELETE’

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용합니다.

저도 아직 한번도 사용해 본 적이 없어요. 주로 post,get 만 사용해서…

 

‘PUT’

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신/변경하는 목적으로 사용됩니다.

axios.put(‘url’, [data])

이런식으로 사용하는데, ‘DELETE’와 ‘PUT’은 url를 전체적으로 넣는 것이 아니라 점이 ‘POST’,’GET’가 다른점이랍니다

 

 

 

 

참조

👉🏻 https://www.npmjs.com/package/react-axios 

react-axios