Suspense

비동기 처리는 순차적으로 작업의 처리가 이루어 지지 않기 때문에 해당 작업을 완료하기 전까진 사용자에게 해당 데이터를 제공해줄수 없다는 단점이 존재한다.

이러한 단점을 보완하기 위해 React에서는 Suspense라는 기능을 제공한다.

<Suspense fallback={<Loading/>}>
    <p>로딩 끝!</p>
</Suspense>

통상적으로 위 코드와 같은 형태로 사용되곤 한다. 그렇다면 Suspense가 과연 무엇일까?

Suspense는 쉽게 말해 "데이터가 아직 처리되지 않았으니까 fallback에 있는 컴포넌트를 처리하는 동안 대신 보여줘" 라고 리액트에게 말해주는 역할을 한다.

즉, 데이터가 비동기적으로 처리되는 동안 보여줄 ui를 선언적으로 지정하여 사용할수 있다는 것이다.

이게 무슨 장점이 있는지 확인하기 위해 Suspense를 사용하지 않았을때의 코드를 한번 살펴보자.

export default function NoSuspense(){
    const [state, setState] = useState<string>('')
    
    useEffect(() => {
        fetchFn().then(res => setState(res))
    },[])
    return state !== '' ? <p>{state}</p> : <Loading />;
}

Suspense를 사용하지 않았을때 흔히 작성되는 형식의 리액트 코드이다.

state의 값을 확인하여 보여줘야할 컴포넌트와 로딩 컴포넌트를 분리해서 조건부 렌더링을 실시한다.

예시 코드에서는 처리해야할 데이터가 1개이지만, 실제로 프로그래밍을 하게되면 이렇게 처리를 해야할 데이터가 많아질수록 코드가 길어지고 하나하나에 대한 조건문을 작성하는데 있어 매우 비효율 적이고 가독성도 낮아질 수 밖에 없다.

결정적으로, 이러한 상황에서 주목해야 할것은 로딩 컴포넌트를 보여주는 것 그 자체 이지 어떻게 로딩 컴포넌트를 보여줄 것인지가 아니다.

export default function DoSuspense(){
    const [state, setState] = useState<string>('')
    
     useEffect(() => {
        fetchFn().then(res => setState(res))
    },[])
    return (
        <Suspense fallback={<Loading/>}>
            <p>{state}</p>
        </Suspense>
    )
}

따라서 우리는 그저 Suspense로 비동기처리후 사용될 데이터를 감싸주기만 하면 된다.

이렇게 함으로써 온전히 로딩 컴포넌트를 보여주는 것에 집중하여 로직을 작성할수 있게 되고, 가독성 또한 현저히 상승된다.