useEffect 로딩 상태와 Suspense는 무엇이 다르고 언제 써야 할까 빠른 답 useEffect 방식은 요청 시작, 성공, 실패, 로딩 종료를 컴포넌트 안의 state로 직접 관리한다. Suspense 는 자식 트리가 아직 렌더링 준비를 끝내지 못했을 때 가장 가까운 fallback 을 보여주는 경계 모델이다. 일반 fetch 를 useEffect 안에서 호출하는 것만으로는 Suspense 가 동작하지 않는다. Suspense 를 쓰려면 fallback 위치, Error Boundary, 데이터 캐시나 프레임워크 지원 여부를 함께 봐야 한다. 목차 한눈에 비교 시간 흐름으로 이해하기 현재 React 기준에서 봐야 할 점 useEffect 방식이 맞는 상황 useEffect에서 자주 생기는 안티패턴 Suspense 방식이 맞는 상황 경계 배치와 리렌더링 흐름 선택 기준 한눈에 비교 상태 소유권 useEffect 방식은 isLoading , data , error 를 컴포넌트가 직접 가진다. Suspense 방식은 대기 UI 표시를 경계가 맡고, 데이터 준비 여부는 Suspense를 지원하는 데이터 소스가 담당한다. 데이터 흐름 useEffect 는 첫 렌더 이후 Effect에서 요청을 시작하고 응답을 state로 반영한다. Suspense 는 렌더링 중 값을 읽을 때 아직 준비되지 않았음을 React가 감지하고 경계로 빠진다. 리렌더링 useEffect 는 setState 가 일어나며 로딩 화면, 성공 화면, 실패 화면으로 다시 렌더링된다. Suspense 는 자식 트리 렌더링을 보류했다가 데이터가 준비되면 다시 렌더링을 시도한다. 에러 처리 useEffect 는 보통 error state와 조건부 렌더링으로 처리한다. Suspense 와 함께 쓰는 Promise 실패는 Error Boundary 또는 대체 값 설계가 필요하다. 적용 조건 useEffect 는 브라우저 API, 네트워크 요청, 외부 위젯처럼 컴포넌트 밖 시스템과 동...