⚛️ <Suspense>란?

 

🗣️ 'Suspense'를 써보신 적 있나요? 있다면 언제, 왜 쓰시나요? 안 쓰면 어떤 점이 불편하나요?

 

쓰긴 쓰는데..로딩 중에 대신 보여줄 UI를 제공하기 위해서 아닌가? 

 

리액트의 공식문서에 의하면 <Suspense>는 children이 로딩 전까지 보여줄 fallback 요소를 제공하는 컴포넌트라고 한다.

리액트의 <Suspense>에 대해서 더 자세히 다루기 전에,

Suspend라는 단어의 뜻을 한번 살펴보고 가면 <Suspense>를 왜 쓰고, 언제 쓰는지, 그리고 역할이 무엇인지 이해하기가 쉽다.

 

Suspend는 일시적으로 어떤 동작이 발생하거나 일어나는 것을 멈추는 것 (temporarily prevent from continuing or being in force or effect)이다.

 

그럼 리액트의 <Suspense>는 어떤 동작을 언제 잠시 멈춰주는 걸까?

Suspense의 props

Suspense가 어떤 동작을 언제 잠시 멈추는지 알기 위해 먼저 Suspense의 props를 살펴보자.

다음은 일반적인 Suspense의 형태다.

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

• children ( <SomeComponent />) : 실제로 렌더링하고자하는 UI. children이 렌더링 도중 suspend되어 있다면, Suspense boundary는 fallback을 대신 렌더링한다.
• fallback (fallback={<Loading />}) : 실제 UI가 로딩을 완료하지 않았을 경우 대신할 UI. React node라면 어떠한 값도 들어갈 수 있다. 일반적으로는 스켈레톤이나 스피너처럼 경량 placeholder UI가 들어간다. children이 suspend 되면 fallback으로 자동적으로 대체하고, 데이터가 준비되었다면 children으로 자동적으로 바꿔치기한다. fallback이 렌더링 도중에 suspend 된다면 가장 가까운 부모 Suspense boundary를 작동한다.

⚠️ 주의할 점

• 리액트는 첫 마운트 이전에 suspend된 렌더의 state을 보존하지 않는다. 즉, 컴포넌트가 로드되면, 리액트는 suspend 된 트리를 처음부터 렌더링 하는 것을 재시도한다.
• startTransition나 useDeferredValue가 업데이트를 일으킨 게 아니라면, Suspense가 tree의 내용을 보여주는 도중에 또 suspend가 된다면 fallback이 다시 보여지게 된다. 
• 다시 suspend되어서 이미 노출된 콘텐츠를 숨겨야 한다면, 리액트는 content tree의 layout Effects를  클린 업한다. 다시 콘텐츠를 보여줄 준비가 된다면 리액트는 다시 layout Effects를 실행한다. 따라서 콘텐츠가 숨겨진 도중에 Effects가 DOM 레이아웃을 계산하지 않는다.
• 리액트는 Suspense와 함께 Streaming Server Rendering와 Selective Hydration를 내부적으로 사용해 최적화를 한다. (an architectural overview와 a technical talk에서 더 자세한 내용을 다룬다)

Suspense 활용

1. 콘텐츠가 로딩되고 있는 동안 보여줄 fallback을 보여주고 싶을 때
2. 한꺼번에 콘텐츠를 노출하고 싶을 때
3. 로딩되고 있는 동안 중첩(nested)된 콘텐츠를 노출하고 싶을 때
4. 새 (fresh) 콘텐츠를 로딩하고 있는 동안 직전(stale) 콘텐츠를 보여줄 때
5. 이미 노출된 콘텐츠를 숨기는 걸 방지하고 싶을 때
6. Transition이 일어나고 있다는 걸 알리고 싶을 때
7. navigation이 발생할 때 Suspense boundary들을 리셋하고 싶을 때
8. 서버 에러 발생 시와 클라이언트에만 해당하는 콘텐츠를 보여줄 fallback을 제공하고 싶을 때

📚 References

<Suspense> – React

 

 

🤔 TMI, 느낀 점

간단할 줄 알았던 suspense.. 공식문서 한글 버전은 아직이고, suspense 공식 지원도 아직인 듯

글의 길이가 너무 길어지게 되어 suspense의 활용에 관해서는 다음 글에서 다루기로 했다.