June.

2024년 1분기 안에는 꼭...

Portfolio

About

React flushSync에 대해서

2023/09/24
짧.

2 min read

React flushSync에 대해서

Locales:

ko

en

flushSync

1import { flushSync } from "react-dom"; 2 3// flushSync를 사용하여 동기적으로 업데이트를 처리 4flushSync(() => { 5 doSomething(); // 업데이트할 작업 수행 6}); 7 8// 이 라인에서는 Dom이 업데이트 됐습니다.

react-dom 패키지의 flushSync 함수는 React의 동기적 업데이트를 수행하는 데 사용되는 메서드입니다. React에서 일반적으로 업데이트는 비동기적으로 처리되며, 업데이트 큐에 있는 변경 사항은 다음 렌더 사이클에서 처리됩니다. 그러나 flushSync 함수를 사용하면 해당 메서드 내부의 콜백의 업데이트를 즉시 처리하고 렌더링을 동기적으로 진행할 수 있습니다.

flushSync의 역할과 사용 사례는 다음과 같습니다:

  1. 동기적 렌더링: flushSync를 사용하면 React의 일반적인 비동기 업데이트 프로세스를 우회하고 업데이트를 즉시 처리하여 동기적으로 렌더링할 수 있습니다.
  2. 유저 경험: 특정 상황에서 렌더링이 비동기적으로 처리될 때 발생하는 렌더링 지연을 최소화하기 위해 사용됩니다. 예를 들어, 사용자 입력에 반응하여 변경 사항을 즉시 화면에 반영해야 하는 경우에 유용합니다.

주의사항

flushSync는 주의해서 사용해야 합니다.

  1. 동기적 렌더링은 위험합니다: 동기적 렌더링은 성능에 영향을 줄 수 있으며, 잘못 사용하면 애플리케이션의 응답성을 저하시킬 수 있습니다. 따라서 신중하게 사용해야 합니다.
  2. React 18버전: flushSync 함수는 React 18부터 도입되었으며, 이전 버전에서는 사용할 수 없을 수 있으므로 React 버전과 함께 사용 가능 여부를 확인해야 합니다.
  3. 꼭 필요할까?: flushSync를 사용하는 경우는 흔하지 않습니다. 앱이 React API만 사용하고 타사 라이브러리와 통합하지 않는 경우 flushSync는 필요하지 않을 것입니다.
  4. Suspense와 사용한다면 주의: 만약 Suspense 를 사용한다면 flushSync 가 강제로 fallback state를 표시할 수 있습니다.

관련 포스트가 4개 있어요.

useSyncExternalStore가 무엇일까?

짧.
react-use-sync-external-store cover image
2023/10/23 (updated)

React 18 useSyncExternalStore에 대해서

CSS flex box의 align-items의 flex-start와 baseline의 차이점에 대해서

짧.
css-flex-box-align-items-attributes cover image
2023/09/24

CSS에서 align-items의 flex-start와 baseline의 차이점

maxLength를 넣고 이모지를 넣으면 브라우저마다 계산되는 것이 다르다.

짧.
html-input-max-length cover image
2023/09/15

HTML `<input />`의 maxLength 동작이 safari에서 다른 이슈

React Fragment와 return null의 차이점

짧.
react-fragment-vs-null cover image
2023/04/09

React Fragment vs Null

profile

정현수.

Currently Managed

Currently not managed

© 2024. junghyeonsu all rights reserved.