React 비동기 데이터

axios 요청 계층 설계

axios를 쓰는 이유는 fetch보다 짧게 쓰기 위해서만은 아닙니다. 공통 설정, 인증 갱신, timeout, 에러 정규화를 한 경계에 모읍니다.

01

요청 클라이언트 선택 기준

baseURL, timeout, interceptor, error normalization, cancel token 항목을 요청 수명 주기 관점에서 나누고, 화면 상태와 사용자 조작이 어느 컴포넌트에서 바뀌는지 표시합니다.

요청 수명 주기
02

axios 인스턴스와 API 모듈 경계

API 호출 구현은 axios 인스턴스, 요청/응답 인터셉터, API 모듈, 에러 매핑 함수를 책임별로 나눠 추적합니다. 공통 규칙이 흩어지면 같은 실패도 화면마다 다르게 처리됩니다.

오류 처리
03

axios 라이브러리의 실패 조건

요청마다 설정이 흩어져 timeout, 토큰 갱신, 에러 메시지가 화면마다 다르면 HTTP 클라이언트 경계가 없는 상태입니다. 같은 API를 성공 응답과 실패 응답으로 나눠 화면 문구를 확인합니다.

캐시와 재검증
04

네트워크 오류 재현 증거

마지막에는 instance 설정, 네트워크 캡처, 실패 응답 샘플, 취소 처리 확인을 남겨 같은 요청이 어떤 상태 분기로 들어갔는지 다시 확인합니다.

close
요청 역할
axios는 반복 요청 설정과 응답 파싱을 컴포넌트 밖으로 빼는 HTTP 클라이언트입니다 baseURL, timeout, JSON 변환, 공통 header를 한 인스턴스에 모아 화면 컴포넌트가 요청 절차보다 상태 표현에 집중하게 합니다.
axios.create
설치 확인
설치 뒤에는 import, 번들 포함, 첫 GET 요청까지 같은 예제로 확인합니다 npm 패키지 설치만 보지 말고 API 모듈에서 axios를 불러와 응답 데이터가 loading, success, error 상태로 나뉘는지 확인합니다.
install + import
오류 분기
기본 사용법은 성공 응답, HTTP 오류, 요청 취소를 분리해 검증합니다 200 응답만 통과시키지 말고 401, 500, timeout, unmount 중 취소 시나리오에서 사용자에게 보일 메시지와 재시도 동작을 확인합니다.
status 분기

axios 라이브러리 검증 지점

정상 응답 GET 요청이 resolve되면 로딩 표시가 사라지고 응답 데이터가 지정한 뷰 모델로 변환되어 목록이나 상세 화면에 반영되는지 확인합니다.
오류 응답 서버 오류와 네트워크 끊김을 따로 재현해 response가 없는 에러, status가 있는 에러, 재시도 가능 여부를 구분합니다.
요청 로그 개발자 도구의 network 기록, interceptor 로그, 에러 메시지 매핑 결과를 남겨 같은 API 실패를 다시 추적할 수 있게 합니다.

비동기 데이터 점검

질문: axios 인스턴스가 공통 설정, 에러 매핑, 취소 처리를 어디까지 담당하는가
순서: 공통 HTTP 클라이언트 기준 잡기 -> 프로젝트에 axios 추가하고 import 확인하기 -> 성공/오류/취소 요청 검증하기
위험: timeout과 인증 실패를 성공 응답 예제만으로 덮으면 화면마다 다른 에러 문구와 중복 재시도 코드가 생깁니다.