UI 차단을 멈추세요: React의 중단 가능한 렌더링 (Interruptible Rendering)

React 렌더링은 사용자 인터페이스(UI)를 멈추게 할 수 있습니다.

과도한 연산은 메인 스레드를 차단합니다. 사용자는 화면이 멈춘 것을 보게 되며, 이는 사용자 경험을 해칩니다.

중단 가능한 렌더링(Interruptible rendering)은 이 문제를 해결합니다. 이를 통해 React는 사용자 입력을 처리하기 위해 작업을 일시 중지할 수 있습니다.

작동 방식:

  • React는 작업을 작은 단위로 나눕니다.
  • 클릭이나 타이핑과 같은 우선순위가 높은 작업을 확인합니다.
  • 사용자가 상호작용하면 React는 백그라운드 작업을 일시 중지합니다.
  • React는 입력을 먼저 처리합니다.
  • 그 후 React는 백그라운드 작업을 다시 재개합니다.

이를 관리하기 위해 transition을 사용합니다. useTransition을 사용하여 긴급하지 않은 업데이트를 표시하세요. 이렇게 하면 React가 UI의 반응성을 유지하도록 지시할 수 있습니다.

과도한 데이터 처리로 인해 앱 성능이 저하되도록 방치하지 마세요.

출처: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb