Loading

로딩 전까지 대체 UI(Fallback)을 보여주는 컴포넌트.

Fallback
어떤 기능이 제대로 동작하지 않을 때 작동하는 기능

<Suspense fallback={<Loading />}>  
    <SomeComponent />  
</Suspense>

 

Suspense를 사용하는 이유는 뭘까?

---

Suspense를 사용하기 이전 Data Fetching을 하던 방법은 크게 2가지가 있다.

Fetch-on-render
컴포넌트가 처음 렌더링 될 때 데이터 요청이 발생한다

데이터 흐름
렌더링 → 데이터 요청 → 응답 → 리렌더링

단점
WaterFall 문제가 발생할 수 있다.

network waterfall

 

WaterFall
순차적으로 데이터가 요청되는 문제를 뜻한다.
병렬적으로 실행되는 방식에 비해 성능 이슈가 있으므로 반드시 해결해야한다.

 

Fetch-then-render
컴포넌트가 처음 렌더링 되기 이전 , 업데이트 되기 이전 데이터 요청이 발생한다.

데이터 흐름
데이터 요청 → 렌더링 → 응답 → 리렌더링

단점
구현이 복잡하다.(코드 결합도가 올라간다.)
-> 부모 컴포넌트에서 자식 컴포넌트의 데이터를 요청해야 한다.

코드 가독성이 좋지않다.
-> 컴포넌트 외부에 함수 호출등...

-> 영어 뜻 그대로 Fetch를 Render 이전에 하냐 도중에 하냐의 차이이다.

Render-as-you-fetch

컴포넌트 렌더링과 동시에 데이터 요청이 발생한다.

데이터 흐름
데이터 요청 + 렌더링 → 응답 → 리렌더링

특징
fallback
-> 데이터가 준비될 때까지 렌더링된다.

렌더링 순서 지정
-> 상위 Suspense로 하위 Suspense를 감싸면 상위 -> 하위순으로 Suspense가 렌더링된다.

장점
구현이 간단하다.
-> 로딩 상태를 표현하고자 하는 코드에 Suspense로 감싸주기만 하면 된다.

코드 가독성이 좋다.
-> 로딩 상태 판단을 위한 조건문, 삼항연산자, 논리연산자 제거등...

Suspense 사용하기

---

기존 로딩 처리

변수를 통해 데이터가 로딩 상태를 판단한다.

const [todos, isLoading] = fetchData("/todos"); 

if (isLoading) { 
    return <Spinner />; 
} 

return <Todos data={todos} />;

Suspense를 통한 로딩 처리

fallback props를 통해 선언적으로 로딩 상태를 판단한다.

const todos = fetchData("/todos"); 

return ( 
    <Suspense fallback={<Spinner />}> 
        <Todos data={todos} /> 
    </Suspense> 
);

React Query(TanStack Query)와 함께 사용하기

---

import { useSuspenseQuery } from '@tanstack/react-query'

const { data } = useSuspenseQuery({ queryKey, queryFn })

suspense 모드를 사용할 때는 status 상태와 error 객체가 필요하지 않다.

https://www.codingmax.net/courses/ko-react-query/section03/lec0032

다음 내용은 시간이 없어서 다음에 알아보고자 한다... 😭

Skeleton

---

페이지가 로드되기 전에 보여지는 실제 콘텐츠를 모방한 UI.

 

장점

UX 개선
사용자가 콘텐츠를 미리 예측할 수 있도록 하여 사용자의 이탈을 막을 수 있다.

시각적 일관성 유지
실제 콘텐츠 로드 시 갑작스래 UI가 바뀌는 느낌을 줄이며, 화면 전환이 자연스러워진다.

로딩 시간 단축
비어 있는 화면과 비교하면 로드 중이라는 신호를 보내는게 더 로드시간이 짧은 것처럼 느껴진다.

-> 엘리베이터에서 지루함을 덜어주는 엘리베이터의 거울과 비슷한 효과 인 것 같다.

 

유의할 점

실제 콘텐츠와 유사하게 디자인 하기
실제 콘텐츠의 형태, 구조와 매우 유사하게 디자인해야 한다.
-> 사용자가 예측한대로 콘텐츠가 나오지 않는다면 사용자가 당황할 수 있기 때문이다.

지나치게 사용하지 않기
로딩이 짧거나 작은 요소에는 사용하지 않아야 한다.
-> 개발시간이 지체되며, 로딩 시간 또한 오히려 길게 느껴질 수 있다.

 

Skeleton ui 예시