자바스크립트 + 리액트 디자인 패턴

347

Chapter 13_

렌더링 패턴

리액트의 동시성 모드

concurrent

mode

기능이 도입되면 이러한 요구사항을 모두 충족할 수 있습

니다. 동시성 모드는 여러 작업을 동시에 처리하면서도 우선순위에 따라 작업 간 전환을 가

능하게 합니다. 작업 전환 시 부분적으로 렌더링된 트리는 진행을 잠시 멈추어, 다시 동일한

작업으로 돌아왔을 때 이전의 렌더링 작업을 계속할 수 있습니다.

동시성 모드는 점진적 하이드레이션을 구현하는 데에도 사용될 수 있습니다. 동시성 모드

로 점진적 하이드레이션을 구현한다면 페이지의 각 조각을 하이드레이션하는 작업은 동시성

모드가 맡게 됩니다. 사용자 입력과 같은 더 높은 우선순위의 작업이 필요하면 리액트는 하

이드레이션 작업을 일시 중지하고 사용자 입력을 받아들이는 작업으로 전환합니다. 여기에

lazy

()

및

Suspense

()

와 같은 기능을 사용하면 선언적인 로딩 상태를 통해, 지연 로드되는

중임을 보여줄 수 있습니다. 또한

SuspenseList

()

는 지연 로딩되는 컴포넌트의 우선순위를

정의하는 데 사용할 수 있습니다. 댄 아브라모브

Dan

Abramov

는 동시성 모드를 실제로 보여주고

점진적 하이드레이션을 구현하는 훌륭한 데모

14

를 공유하기도 했습니다.

13.9

아일랜드 아키텍처

케이티 사일러 밀러

Katie

Sylor