React 환경에서 중복 API 요청 개선
프론트엔드
React 환경에서 중복 API 요청 개선
두줄요약
React에서 전역 Context와 비동기 흐름이 얽히며 중복 API 요청과 레이스 컨디션이 발생했습니다. AbortController, runId, Promise.all로 요청 취소와 최신 응답 보장을 개선했습니다.
문제 상황
- React 전역 Context와 여러 useEffect가 얽히며 동일 API가 짧은 시간에 반복 호출되는 중복 요청 문제 발생
- 상태 변경과 리렌더링이 연쇄적으로 이어지며 이전 응답이 최신 데이터를 덮어쓰는 현상도 동반
원인 분석
- 인증 상태, Context 상태, Consumer 리렌더링 사이의 복잡한 의존성으로 조회 로직이 반복 실행
- 단순한 서버 응답 지연이 아니라 프론트엔드 내부 상태 관리와 비동기 처리 구조가 핵심 원인
해결 방법
- AbortController로 진행 중인 요청을 취소하고, 새 요청 발생 시 이전 요청 중단
- runId로 최신 요청 여부를 검증해 오래된 응답 무시
- 의존성이 없는 요청은 Promise.all로 병렬 처리해 초기 로딩 시간 단축