본문 바로가기

FETCH

React 앱에서 REST API 요청 최적화 및 중복 제거 방법 React 애플리케이션에서 REST API 요청을 효율적으로 관리하는 것은 성능 최적화와 사용자 경험 향상에 매우 중요합니다. 특히 중복 요청을 줄이고 불필요한 네트워크 트래픽을 막는 방법을 잘 구현하면 앱의 반응 속도가 크게 개선됩니다.1. API 요청 중복 문제 이해하기React 컴포넌트가 여러 번 렌더링되거나 동일한 요청이 여러 컴포넌트에서 발생할 때 중복 API 호출이 발생할 수 있습니다. 이는 서버에 불필요한 부하를 일으키고 클라이언트 성능에도 부정적 영향을 미칩니다.2. 요청 최적화 전략API 요청 중복을 예방하고 최적화하는 다양한 방법이 있습니다:요청 캐싱 (Caching)요청 취소 (Cancellation)중앙 상태 관리 (Context API, Redux 등) 활용React Query 같.. 더보기
React 앱에서 파일 다운로드 및 저장 처리하기 파일 다운로드/저장은 대시보드, 리포트, 이미지/PDF 내보내기 등에서 자주 요구되는 기능입니다. 본 글에서는 React 환경에서 작은 파일부터 대용량까지 안정적으로 다운로드하고, 로컬 저장까지 처리하는 실무 패턴을 정리합니다.1. 최소 구현: Blob → a.click() → URL.revokeObjectURL가장 단순하고 호환성 좋은 방법은 Blob을 만들어 임시 URL을 만들고, 보이지 않는 앵커 태그로 클릭 이벤트를 트리거하는 방식입니다. 클릭 후 반드시 URL.revokeObjectURL로 메모리를 회수합니다.// utils/download.jsexport function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob).. 더보기