React.Suspense에 대해 설명해주세요.- 답변)
- 의도: 비동기 데이터 로딩 및 렌더링 과정을 이해하고 Suspense를 사용할 수 있는지 확인하는 질문
- 모범 답안: 네 리액트의 Suspense는 비동기 데이터를 로딩할 때, 그리고 로딩 상태를 표시할 때 사용하면 좋은 선언형 코드의 일종입니다. Suspense에는 fallback 속성을 줄 수 있는데 이 속성이 바로 로딩 상태일 때 화면에 보여줄 요소가 됩니다.
선언형 코드이니만큼 기존에는 로딩 상태 표시를 위해 isLoading으로 상태를 관리해 로딩 화면을 조건부 렌더링을 해주었다면, 이제는 태그에 속성을 주는 것만으로 간결하게 구현할 수 있다는 장점을 가지고 있습니다. 다만 주의할 점은 특정 비동기 데이터 호출 라이브러리만 Suspense를 지원하기 때문에 잘 알아보고 적용해야 합니다.
- 답변)
React.Suspense란?
Suspense는 React에서 비동기 데이터 로딩 시, 로딩 상태를 화면에 보여줄 수 있도록 돕는 컴포넌트이다. 주로 React의 동적 데이터 페칭이나 코드 스플리팅에 활용된다.
특징
1. 로딩 상태 표시 (Fallback 제공)
Suspense의 fallback 속성은 데이터를 로딩 중일 때 보여줄 UI 요소를 정의한다. 로딩 상태를 처리하기 위해 복잡한 상태 관리를 하지 않아도, 간단히 선언적으로 로딩 화면 구성 가능.
🖥️ jsx
<Suspense fallback={<div>Loading...</div>}>
<SomeComponent />
</Suspense>위 코드에서 SomeComponent가 데이터를 비동기적으로 로드하는 동안, <div>Loading...</div>가 화면에 나타난다.
➕
fallback
noun
1. an alternative plan that may be used in an emergency.
"teaching was a last resort, a fallback"
2. a reduction or retreat.
"the offering will hit the market after a fallback from record highs"
2. 선언적 코드의 장점
기존에는 isLoading 등의 상태를 사용해 조건부 렌더링을 해야 했지만, Suspense는 이를 태그 속성만으로 처리하여, 코드가 간결해지고 가독성이 높아진다.
❓선언적 코드
🐦🔥 TIL - 선언적 코드, 명령형 코드
기존 방식
🖥️ jsx
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetchData().then(() => setIsLoading(false));
}, []);
return isLoading ? <Loading /> : <DataComponent />;
Suspense 활용
🖥️ jsx
<Suspense fallback={<Loading />}>
<DataComponent />
</Suspense>3. React의 비동기 렌더링
Suspense는 React의 Concurrent Rendering(동시성 렌더링) 기능과 밀접한 관련이 있다. 이는 React가 UI의 부드러운 업데이트와 빠른 반응성을 제공하도록 돕는다.
❓Concurrent Rendering?
📣 TIL - 동시성렌더링 (Concurrent Rendering)
주의점 및 한계
-
지원되는 라이브러리
현재 Suspense는 React에서 기본적으로 제공되지만, 데이터 로딩 관련 라이브러리는 이를 명시적으로 지원해야 한다. 예를 들어, React의 React.lazy로 동적 컴포넌트를 로드하거나, react-query, Relay와 같은 라이브러리가 이를 활용할 수 있다. -
데이터 페칭만으로는 부족
기본 React에서는 데이터 페칭을 Suspense로 직접 처리할 수 없다. 별도의 데이터 페칭 라이브러리를 함께 사용해야 한다.
활용 사례
코드 스플리팅
React.lazy와 함께 사용하여 동적 컴포넌트를 로드
❓React.lazy
🍩 TIL - React.lazy, 코드 스플리팅
🖥️ jsx
const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<div>Loading Component...</div>}>
<LazyComponent />
</Suspense>데이터 로딩
Tanstack-query 같은 라이브러리를 활용한 데이터 로딩
🖥️ jsx
const query = useQuery('data', fetchData);
<Suspense fallback={<div>Loading Data...</div>}>
<DataComponent data={query.data} />
</Suspense>➡️ React의 Suspense는 비동기 데이터 로딩과 지연된 렌더링을 효율적으로 처리할 수 있는 강력한 도구다. 선언적 코드로 로딩 상태를 간단히 구현할 수 있으며, React의 최신 렌더링 기능을 적극적으로 활용할 수 있다. 하지만, 이를 데이터 로딩에 사용하려면 추가 라이브러리의 지원 여부를 확인해야 한다.
