swr 썸네일형 리스트형 React에서 비동기 데이터 다중 병합 처리하기 여러 API나 비동기 소스에서 데이터를 받아 하나의 리스트로 합치고, 일관된 UI로 보여주는 일은 프론트엔드에서 매우 흔합니다. 이 글은 Promise.all/Promise.allSettled, AbortController, 병렬 수 제한, React Query/SWR, 서버 컴포넌트까지 실무에서 바로 쓰는 병합 패턴을 정리합니다.1. 목표와 설계 기준목표는 다음과 같습니다. 1) 빠르게 병렬로 가져오되, 2) 부분 실패를 견디며, 3) 중복 호출과 경합을 피하고, 4) 병렬 수를 제어해 서버를 보호하고, 5) 캐시/선택자/메모이제이션으로 불필요한 리렌더를 줄이는 것입니다.2. 기본 패턴: Promise.all로 다중 리스트 병합여러 리스트를 id로 합치는 가장 단단한 기본기입니다. 우선 각 소스는 최대.. 더보기 React 앱에서 데이터 페칭 시 Skeleton UI 구현하기 데이터 페칭이 필요한 화면에서 비어있는 영역 대신 콘텐츠의 윤곽을 먼저 보여주는 Skeleton UI는 체감 속도를 높이고 레이아웃 시프트를 줄이는 핵심 패턴입니다. 실무에서 바로 적용할 수 있는 컴포넌트 설계, 상태 관리, 접근성, 성능 최적화까지 단계별로 정리했습니다.1. Skeleton UI가 필요한 이유Skeleton은 실제 콘텐츠의 레이아웃을 모사해 사용자에게 "곧 콘텐츠가 로드된다"는 신호를 줍니다. 이는 로딩 스피너 대비 체감 성능을 개선하고 LCP 개선, CLS 방지에 효과적입니다. 리스트/카드/디테일 뷰에 우선 적용하는 것이 ROI가 높습니다.2. 가장 단순한 패턴: isLoading 분기데이터 로딩 여부에 따라 Skeleton을 조건부 렌더링합니다. 아래 예시는 카드 리스트 로딩에 Sk.. 더보기 이전 1 다음