axios 사용 지도

axios 인스턴스

fetch와 달리 axios는 JSON 변환, baseURL, headers, timeout, interceptor 같은 요청 정책을 한 인스턴스에 모아 재사용하기 쉽습니다.

axios.get

응답 객체의 data를 기준으로 화면 상태를 업데이트하고 try catch로 실패를 처리합니다.

instance

baseURL, timeout, 공통 header를 axios.create로 묶어 API 모듈에서 재사용합니다.

useEffect

컴포넌트 수명 주기에 맞춰 요청을 보내고 cleanup 또는 취소 흐름을 함께 고려합니다.

baseURL

환경별 API 주소가 한곳에서 관리됩니다.

timeout

무한 대기 대신 실패로 전환할 기준이 있습니다.

error

error.response와 error.request를 구분합니다.

compare

단순 요청은 fetch, 정책 재사용은 axios가 유리한지 판단합니다.