React - API

API 호출

• API 호출하기 위한 axios 라이브러리 설치

yarn add axios

axios methods (REST API)

1. POST

• 리소스 생성 (데이터 등록)

2. GET

• 리소스 조회 (데이터 조회)
• 해당 도큐먼트에 대한 자세한 정보 획득

3. PUT

• 리소스 수정 (데이터 수정)

4. DELETE

• 리소스 삭제 (데이터 삭제)

axios 사용법

import axios from 'axios';
axios.get('/users/1');

• get 자리에는 메서드 이름을 소문자로 작성
  ex) new data 등록 원할 경우 -> axios.post()
• parameter 에는 API 의 주소 작성
• axios.post() 로 데이터를 등록 할 경우 두번째 파라미터에 정보 삽입 가능

axios.post('/users', {
  username: 'totoro',
  name: 'babytotoro'
});

useState 와 useEffect 로 데이터 로딩

• useState: 요청 상태 관리
• useEffect: 컴포넌트가 렌더링되는 시점에 요청 시작

요청에 대한 3가지 상태를 관리할 것
1. 요청의 결과
2. 로딩 상태
3. 에러

useReducer 로 요청 상태 관리

• useState 대신 useReducer 사용
• LOADING, SUCCESS, ERROR 액션에 따라 다르게 처리
• 장점
  • useState 의 setState 함수를 여러번 사용하지 않아도 됨
  • 로직을 분리하였기에 다른곳에서도 쉽게 재사용 가능

useAsync 커스텀 Hook 만들어 사용

• 매번 반복되는 코드를 작성하지 않고 커스텀 Hook 을 만들기
• Hook 을 이용해 요청 상태 관리 로직을 쉽게 재사용 가능