React | Suspense

React

목차

1. Suspense 🌊
   
   1. suspense가 뭔가요?
      : 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능
      
   2. suspense로 가능한 것은 어떤 것들이 있나요?
      1. 모든 요청을 기다리지 않고도 화면을 렌더링할 수 있음
      2. 경쟁 상태 발생을 방지함
      3. React.lazy

1. Suspense

1. suspense가 뭔가요?

   • 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능

     사용 예시

       const resource = fetchProfileData();
       function ProfilePage() {
       return (
           <Suspense fallback={<h1>Loading profile...</h1>}>
           <ProfileDetails />
           <Suspense fallback={<h1>Loading posts...</h1>}>
               <ProfileTimeline />
           </Suspense>
           </Suspense>
       );
       }
       function ProfileDetails() {
       // 아직 로딩이 완료되지 않았더라도, 사용자 정보 읽기를 시도합니다
       const user = resource.user.read();
       return <h1>{user.name}</h1>;
       }
       function ProfileTimeline() {
       // 아직 로딩이 완료되지 않았더라도, 게시글 읽기를 시도합니다
       const posts = resource.posts.read();
       return (
           <ul>
           {posts.map((post) => (
               <li key={post.id}>{post.text}</li>
           ))}
           </ul>
       );
       }
     

     
     

2. suspense로 가능한 것은 어떤 것들이 있나요?

   1. 모든 요청을 기다리지 않고도 화면을 렌더링할 수 있음
      • fetching 라이브러리만 사용했을 때 모든 data 응답을 기다려야 컴포넌트 트리를 렌더링할 수 있었던 문제를 해결
      • 예시
        • fetching 라이브러리만 사용 시 : data fetching 요청 -> 로딩중 UI 렌더링 -> data 응답 -> 컴포넌트에 응답 반영
        • suspense 사용 시 : data fetching 요청 -> suspense 하위의 컴포넌트에 요청 리소스를 반영 -> suspense에 의해 로딩 UI 렌더 -> 요청 리소스로 data 응답이 들어옴 -> 컴포넌트에 응답 반영
          * 요청 직후 요청 리소스를 바로 컴포넌트로 주입하는 방식
   2. 경쟁 상태 발생을 방지함
      * 경쟁상태 : 여러개의 비동기 작업의 결과가 하나의 DOM 객체에 반영되는 상황
      • 데이터를 동기적으로 받아오는 것처럼 느끼게 해줌
      • suspense는 state 설정 시기를 바꾸어 해결함
      • 요청과 동시에 해당 요청 리소스를 반영하기 때문에 이전에 수행하고 있던 요청이 있더라도 해당 요청은 무시하고 새로운 요청으로 대체됨
   3. React.lazy
      • lazy 컴포넌트는 반드시 Suspense 컴포넌트 하위에서 렌더링되어야 하며 Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해줌

---

출처

Suspense
Suspense 예시
Suspense 예시2
Suspense 추가 설명
Suspense lazy(예시3)