React PR - Suspend commit without blocking render 이는 렌더러(React DOM, React Native)에 새로운 기능을 추가합니다. 트리가 준비될 때까지

React PR - Suspend commit without blocking render 이는 렌더러(React DOM, React Native)에 새로운 기능을 추가합니다. 트리가 준비될 때까지 트리가 표시되지 않도록 하고, 필요한 경우 폴백을 표시하지만 그 동안 React 컴포넌트가 평가되는 것을 차단하지 않습니다. 구체적인 예는 CSS 로딩입니다: React DOM은 스타일시트가 로드될 때까지 커밋이 적용되지 않도록 차단할 수 있습니다. 이를 통해 CSS를 비동기적으로 로드하는 동시에 스타일이 지정되지 않은 콘텐츠가 갑자기 표시되는 것을 방지할 수 있습니다. 이미지와 글꼴은 다른 사용 사례 중 일부입니다. 이를 "커밋 단계에 대한 서스펜스"라고 생각할 수 있습니다. 전통적인 서스펜스, 즉 사용 시에는 렌더링 단계에서 차단됩니다: React는 데이터를 사용할 수 있을 때까지 렌더링을 진행할 수 없습니다. 하지만 스타일시트와 같은 것의 경우 컴포넌트를 평가하기 위해 CSS가 필요하지 않습니다. 트리가 커밋되기 전에 로드하기만 하면 됩니다. React는 부작용과 변이를 버퍼링하기 때문에 스타일시트가 백그라운드에서 로드되는 동안 병렬로 작업을 수행할 수 있습니다. 일반 Suspense와 마찬가지로, "suspensey" 스타일시트나 이미지가 아직 로드되지 않은 경우 가장 가까운 Suspense 폴백이 트리거됩니다. 하지만 현재로서는 startTransition과 같이 긴급하지 않은 업데이트에 대해서만 이 작업을 수행합니다. 긴급한 업데이트 중에 서스펜스 리소스를 렌더링하면 오늘의 동작으로 되돌아갑니다. (향후 긴급한 업데이트 중에 커밋을 일시 중단하는 방법을 추가할 수도 있고 추가하지 않을 수도 있습니다.) 이번 PR에서는 호스트 구성에 추가된 새로운 메서드를 통해 재조정자에서 이 기능을 구현했습니다. 이 기능을 시연하는 테스트를 작성하기 위해 내부 React "no-op" 렌더러를 사용했습니다. 아직 Suspensey CSS, 이미지 등을 React DOM에 구현하지는 못했습니다. 후속 PR에서 @gnoff와 함께 작업할 예정입니다. https://twitter.com/acdlite/status/1637102880850059264 트랜지션 중 또는 서스펜스 경계 내에서만 발생합니다. 그리고 타임아웃이 내장되어 있습니다. 동작이 변경되는 것을 눈치채지 못하도록 마술처럼 덜 짜증나게 하는 것입니다. img loading=lazy로 옵트아웃할 수 있습니다.