Axios로 게시판 CRUD와 API 상태 처리하기

외부 API를 화면에 붙일 때는 요청 함수, 로딩 상태, 오류 메시지, 응답 데이터 매핑을 분리해야 유지보수가 쉽습니다. 이 실습은 Axios 인스턴스와 커스텀 훅을 기준으로 게시물 데이터를 가져오고, 실패한 요청도 사용자에게 읽히는 상태로 처리하는 흐름을 잡습니다.

1

게시판 CRUD API 상태 처리 흐름

로컬 Mock API로 조회, 생성, 삭제 상태 변화를 확인합니다.

2

준비 단계: 요청 로직 표준화

baseURL, timeout, 공통 오류 처리 기준을 정해 컴포넌트가 요청 세부 구현에 묶이지 않게 합니다.

3

기본 스타일링 (index.css)

로딩, 오류, 빈 목록, 성공 응답이 서로 구분되도록 버튼과 상태 메시지의 기본 표현을 준비합니다.

4

Axios 인스턴스 설정

공통 설정을 가진 인스턴스를 만들고, 개별 요청은 필요한 endpoint와 method만 넘기도록 단순화합니다.

5

게시판 API 기준

baseURL과 timeout을 한곳에 두어 API 서버 주소 변경과 요청 정책을 컴포넌트 밖에서 관리합니다.

핵심Axios로 게시판 CRUD와 API 상태 처리하기은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.