함께 보면 좋은 SuspenseList 내용
Suspense
React의 Suspense는 UI의 비동기 상태를 관리하는 새로운 방식.
기존의 수동적인 loading state 관리 방식과는 본질적으로 철학과 동작이 다르다.
해당 두 가지 방식의 차이를 4가지 관점에서 비교가능하다.
1. 코드의 간결성과 선언적 방식
전통적인 loading state 관리
개발자가 useState, useEffect hook을 사용하여 로딩 상태를 명시적으로 관리해야한다.
이는 컴포넌트마다 중복된 코드가 생길 가능성이 높고, 상태 관리 로직이 복잡해질 수 있음.
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchData().then(() => setLoading(false));
}, []);
return loading ? <LoadingSpinner /> : <DataComponent />;개발자가 로딩 로직과 로딩 상태를 세밀히 제어해야 함
Suspense
선언적으로 비동기 로직을 처리한다.
Suspense는 비동기 데이터를 불러오는 동안 자동으로 대기 화면(fallback)을 랜더링하고, 데이터가 준비되면 UI를 업데이트한다.
const data = useData(); // 비동기 데이터
return (
<Suspense fallback={<LoadingSpinner />}>
<DataComponent data={data} />
</Suspense>
);React가 상태와 흐름을 자동으로 관리
2. 비동기 흐름 제어
전통적인 loading state 관리
로딩 상태를 제어하는 로직이 컴포넌트 내부에 의존한다.
데이터 로딩이 끝나면 반드시 loading 상태를 수동으로 업데이트 해야함.
네트워크 에러 처리, 중첩된 로딩 상태 관리 등은 추가적인 코드 작성이 필요함.
Suspense
Suspense는 React의 비동기 렌더링 구조에 통합되어있다.
비동기 렌더링 구조에 통합되어 있기 때문에 데이터를 불러오는 동안 React는 자동으로 대기 상태를 유지하고, 준비가 끝난 시점에 UI를 업데이트하게 된다.
코드에서 명시적으로 상태 코드를 업데이트하지 않아도 자연스러운 흐름 제어가 가능함.
- React가 자동으로 fallback UI를 보여줌
- 데이터가 준비되면 보여주려는 UI 컴포넌트를 React가 자동으로 다시 렌더링
3. 컴포넌트 분리와 유지보수성
전통적인 loading state 관리
로딩 상태는 로직이 각 컴포넌트에 흩어지기 쉽다.
상태가 많아질수록 관리가 여러워질 수 있고,
복잡한 애플리케이션에서는 중첩된 상태 관리 로직이 유지보수를 어렵게 만든다.
Suspense
비동기 로직은 Data Fetching Hook이나 React.lazy 같은 API로 *추상화되고, UI 렌더링에 집중할 수 있다.
컴포넌트의 *관심사가 분리되고, 비동기 로직을 쉽게 재사용하거나 수정할 수 있게 된다.
4. 성능 최적화
전통적인 loading state 관리
모든 상태가 렌더링 시점에 동기적으로 처리되기 때문에, 비효율적인 리렌더링이나 로딩 체인이 발생할 수 있다.
Suspense
React의 *Concureent Mode와 결합하면, Suspense는 UI를 비동기적으로 처리하며 렌더링 성능을 최적화한다.
예시
1. 데이터가 준비되지 않은 컴포넌트를 미뤄두고, 준비된 컴포넌트만 렌더링
2. 네트워크 지연을 최소화하는 *<SuspenseList> 활용 가능
Remind
-
성능 최적화
Suspense와 React.Lazy의 조합은 웹페이지 최초 HTML 문서 파싱 성능 최적화에 큰 도움이 되며, Next.js와 사용성이 아주 좋음. -
개발자의 개발 편리
React에서 준비되지 않은 UI 컴포넌트를 인지하고, 자동으로 업데이트 시켜주기 때문에 개발자가 로딩 상태관리 등 신경쓸 일을 줄여줌
Suspense:
React가 비동기 상태를 선언적으로 관리하는 방식. 데이터 로드 과정과 UI 렌더링을 React에 맡깁니다. Suspense는 React의 비동기 렌더링 특성을 활용하여 UI를 지연시키는 자동화된 메커니즘을 제공
state로 loading을 처리하는 방식:
데이터 로딩 자체는 비동기적으로 진행되지만, 개발자가 명령형으로 useState와 useEffect를 사용해 상태를 직접 관리합니다. 비동기 데이터를 로드하고, 해당 상태를 수동으로 업데이트하며 UI를 제어하는 코드가 필요합니다. 따라서 이 방식은 비동기 데이터를 명령형으로 처리한다고 볼 수 있다.
