react - Suspense 이해 정리

 

리액트 파다가 헷갈려서 다시 정리함

 

 

 

1. 원래 리액트는 자바스크립트 싱글 스레드 위에서 돌아가기 때문에 병렬적인 작업이 안됨

2. 게다가 비동기 아님 동기임 

3. 그럼 컴포넌트를 세세하게 쪼개서 동시성이 있는 것처럼 작동하게 하자(비동기)

4. 이게 리액트가 말하는 동시성임. 그렇게 나온 코드 스플리팅과 suspense.

 

 

 

*** 리얼 돔이 아니라 가상돔에서 일어나는 일 ***

 

1. 가상 DOM은 실제 DOM과 달리, 컴포넌트를 하나씩 순차적으로 처리하고 렌더링함

2. 그러다보니 어떤 페이지가 있을 때, 컴포넌트 하나 그리고 -> 다음 거 그리고 -> 그 다음 거 그리고... 이렇게 동기적으로 하다보니

 

  <div>
    <느린 컴포넌트 />
    <안 느린 컴포넌트 />
  </div>

 

예시의 코드를 그릴 때 느린 컴포넌트가 모두 그려진 후에 안 느린 컴포넌트를 그림

 

3. 리액트는 이게 싫었음...

4. 그럼 그릴 컴포넌트 몽땅 섞어서 작업 단위를 다 작게 쪼개놓고 그리자!

5. 그 동안 뭐라도 보여주자! (fallback)

6. 이걸 쓰고 싶으면 쪼개놓고 싶은 컴포넌트 바로 위에 suspense 올려놓으면 이 기능이 됨

<Suspense fallback={<div>Loading...</div>}>
  <div>
    <느린 컴포넌트 />
    <안 느린 컴포넌트 />
  </div>
</Suspense>

 

 

 

추가로 이건 길어서 따로 뺌

 

4-1. 그럼 작게 쪼개놓고 그리는 순서는?

      => React는 렌더링할 각 작업에 대해 우선순위를 부여함.

 

1. 사용자 상호작용 (User Interactions)

• 즉시 반응이 필요한 작업: 예를 들어, 사용자가 버튼을 클릭하거나, 입력 필드에 타이핑을 하는 것과 같은 상호작용은 가장 높은 우선순위를 갖습니다. 사용자가 클릭하거나 입력하는 순간, React는 이 이벤트와 관련된 컴포넌트 업데이트를 최우선으로 처리하여 즉각적인 피드백을 제공합니다.

2. 화면에 표시되는 중요성 (Visual Importance)

• 화면에 바로 보여져야 하는 컴포넌트: 사용자가 현재 보고 있는 화면에서 중요한 시각적 요소는 우선적으로 렌더링됩니다. 예를 들어, 사용자가 스크롤할 때 바로 보이는 콘텐츠는 우선순위가 높습니다.
• 백그라운드 작업: 비동기적으로 데이터를 가져오거나, 화면에 당장 필요하지 않은 콘텐츠는 우선순위가 낮게 설정될 수 있습니다.

3. 작업의 긴급성 (Urgency of Tasks)

• 타임 크리티컬 작업: 일정 시간이 지나면 무조건 완료되어야 하는 작업은 높은 우선순위를 가질 수 있습니다. 예를 들어, 특정 애니메이션이 특정 시간 내에 완료되어야 하는 경우입니다.
• 연속성 유지: 사용자의 경험이 단절되지 않도록 보장하기 위해, 관련된 일련의 작업들이 순차적으로 처리되어야 하는 경우도 있습니다.

4. Suspense의 적용 여부

• Suspense 사용 여부: 만약 Suspense가 적용되어 있다면, 비동기적으로 로드되는 컴포넌트의 우선순위가 낮아질 수 있습니다. 이 경우 React는 로딩 중인 컴포넌트가 준비되지 않았더라도, 다른 컴포넌트를 먼저 렌더링할 수 있습니다.

5. 작업의 복잡성 및 비용 (Complexity and Cost of Task)

• 작업 비용: React는 작업의 복잡성과 리소스 소비량에 따라 우선순위를 조정할 수 있습니다. 복잡한 작업이나 많은 리소스를 소모하는 작업은 나중에 처리하거나, 더 중요한 작업이 완료된 후 처리될 수 있습니다.

 

 

 

그럼 이렇게 생각해봤을 때

요즘 많이 하는 라우터 단에 suspense 감싸기는... 내 생각엔 그닥... 좋은 방법은 아님

그냥 url 다르게 이동할 때 loading바 보여주는 걸론 괜찮지만

결국 내부 하위 컴포넌트가 모두 로드 되어야 로딩바가 아닌 화면을 보여주는 거라서...

 

만약 한 화면의 하위 컴포넌트 내부에서 좀 느리다고 판단될 것 같은걸 suspense로 감싸는게 훨씬 나을 거 같음

 

느리다고 판단될 것 같은 걸 이라고 했을 때

왜 느리다고 판단하는지 두 가지로 나눠 봄

 

1. 데이터 느리게 받음

2. ui 무거워서

 

이럴 때는 1은 tanstack Query isLoading 기능이 낫고

2는 ui 단이니까 suspense쓰는 게 적절함