Portfolio

Pitfall | 함정

flushSync는 자주 사용되지 않으며 앱 성능을 저하시킬 수 있습니다.

flushSync를 사용하면 강제로 제공된 콜백 내부의 모든 업데이트를 동기적으로 flush(강제로 비워냄)하도록 할 수 있습니다. 이렇게 하면 DOM이 즉시 업데이트됩니다.

flushSync(callback)

참조

flushSync(callback)

사용법

서드파티 통합을 위한 업데이트 flush하기

참조

`flushSync(callback)`

flushSync를 호출하면 React가 보류 중이던 작업을 강제로 flush하고 DOM을 동기적으로 업데이트 합니다.


import { flushSync } from 'react-dom';

flushSync(() => {
  setSomething(123);
});

대부분의 경우 flushSync를 피할 수 있습니다. flushSync는 최후의 수단으로 사용하세요.

아래에서 더 많은 예시를 확인하세요.

매개변수

callback : 함수. React는 즉시 이 콜백을 호출하고 여기에 포함된 모든 업데이트를 동기적으로 flush합니다. 또한 보류 중인 모든 업데이트, Effect 또는 Effect 내부의 업데이트를 flush할 수도 있습니다. 이 flushSync 호출의 결과로 업데이트가 일시 중단되면 폴백이 다시 표시될 수 있습니다.

반환값

flushSync 는 undefined를 반환합니다.

주의사항

flushSync는 성능을 크게 저하시킬 수 있습니다. 아껴서 사용하세요.

flushSync는 보류 중인 Suspense 경계를 강제로 fallback state로 표시할 수 있습니다.

flushSync는 보류 중인 Effect들을 실행하고, 반환하기 전에 포함된 모든 업데이트를 동기적으로 적용할 수 있습니다.

flushSync는 콜백 내부의 업데이트를 flush하기 위해, 필요한 경우 콜백 외부의 업데이트를 flush할 수도 있습니다. 예를 들어, 클릭으로 인해 보류 중인 업데이트가 있는 경우, React는 콜백 내부의 업데이트를 flush하기 전에 해당 업데이트를 먼저 flush할 수 있습니다.

사용법

서드파티 통합을 위한 업데이트 flush하기

브라우저 API나 UI 라이브러리와 같은 서드파티 코드와 통합할 때, React가 강제로 flush 업데이트를 해야 할 수도 있습니다. flushSync를 사용하면 React가 콜백 내부의 모든 state 업데이트를 강제로 동기적으로 flush하도록 할 수 있습니다:


flushSync(() => {
  setSomething(123);
});
// By this line, the DOM is updated.

이런 상황에서는 React는 다음 코드 줄이 실행될 때 이미 DOM을 업데이트한 상태가 됩니다.

flushSync를 사용하는 경우는 흔하지 않으며, 자주 사용하면 앱 성능이 크게 저하될 수 있습니다. 앱이 React API만 사용하고 서드파티 라이브러리와 통합하지 않는 경우 flushSync는 필요하지 않을 것입니다.

하지만 브라우저 API와 같은 서드파티 코드와 함께 사용될 때는 유용할 수 있습니다.

일부 브라우저 API는 콜백이 끝날 때 콜백 내부의 결과가 DOM에 동기적으로 기록되어 브라우저가 렌더링된 DOM으로 무언가를 할 수 있기를 예상합니다. React는 대부분의 경우 이를 자동으로 처리합니다. 하지만 어떤 경우에는 동기식 업데이트를 강제해야 할 수도 있습니다.

예를 들어, onbeforeprint 브라우저 API를 사용하면 인쇄 대화 상자가 열리기 직전에 페이지를 변경할 수 있습니다. 이 기능은 문서를 인쇄할 때 더 보기 좋게 표시할 수 있는 사용자 지정 인쇄 스타일을 적용하는 데 유용합니다. 아래 예시에서는 onbeforeprint콜백 내부에서 flushSync를 사용하여 React state를 DOM에 즉시 “flush”합니다. 그런 다음 인쇄 대화 상자가 열릴 때 isPrinting이 “yes”를 표시합니다:

예시

flushSync를 사용하지 않으면 인쇄 대화 상자에 isPrinting이 “아니요”로 표시됩니다. 이는 React가 업데이트를 비동기적으로 일괄 처리하고 state가 업데이트되기 전에 인쇄 대화 상자가 표시되기 때문입니다.

Pitfall | 함정

flushSync 는 성능을 크게 저하시킬 수 있으며, 예상과 다르게 보류 중인 Suspense 경계가 폴백 state를 표시하도록 강제할 수 있습니다.

대부분의 경우 flushSync는 피할 수 있으므로, flushSync는 최후의 수단으로만 사용하세요.