react - API 연동하기(axios)

axios 라이브러리

 

axios 설치

yarn add axios

npm install axios

 

axios사용해서 get, put, delete 등의

메소드로 api 요청함

rest api

get : 데이터 조회

post : 데이터 등록

put : 데이터 수정

delete : 데이터 제거

 

axios 사용법

import axios from 'axios';

데이터 조회

사용법> axios.get(경로)

ex) axios.get('/users/1');

데이터 등록

사용법> axios.post(경로, 데이터정보)

ex) axios.post('/users/',{

    username: "green",

    name: "aaaa",

})

 

useState와 useEffect로 데이터 로딩하기

useState 요청 상태를 관리

1. 요청의 결과

2. 로딩상태

3. 에러

useEffect 컴포넌트가 렌더링되는 시점에 요청을 시작