flushSync

 

🎯 flushSync란 무엇인가요?

**flushSync**는 React에서 상태(state) 업데이트를 즉시 반영하고 화면을 강제로 업데이트할 수 있게 해주는 함수예요.
보통 React는 상태가 바뀌어도 비동기적으로 업데이트를 처리해서 성능을 최적화해요.
하지만 어떤 경우에는 "지금 당장 화면에 반영되어야 해!" 라는 상황이 생기죠.

이럴 때 **flushSync**를 사용하면 React가 즉시 렌더링하도록 만들어줍니다.

 

 

🍕 비유로 이해하기: 음식점 주문 처리

여러분이 음식점에서 주문을 받고 있다고 생각해 봐요. 🍔

1. 기본 React 상태 업데이트 (비동기적 처리)
   • 손님이 주문을 하면 주방에 여러 주문을 모아서 한 번에 처리해요.
   • 이렇게 하면 주방의 효율성이 좋아지지만, 손님은 조금 기다려야 할 수도 있어요.
2. flushSync를 사용한 상태 업데이트 (즉시 처리)
   • VIP 손님이 와서 "제 주문은 바로 만들어 주세요!" 라고 요청하는 상황이에요.
   • 이럴 땐 기존 주문을 무시하고 바로 주방에서 VIP 손님의 주문을 처리하죠.

React의 **flushSync**는 이런 즉시 처리를 가능하게 해주는 도구예요.
즉, 상태 업데이트를 바로 실행하고 화면을 강제로 즉시 업데이트합니다.

 

🛠️ flushSync 사용법

flushSync는 React의 react-dom 패키지에 포함된 함수예요.
간단한 예시를 통해 함께 살펴볼게요.

 

1. 기본 예시: 상태 업데이트와 flushSync 비교

flushSync 없이 상태 업데이트

import React, { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 업데이트 전 값이 출력됩니다 (비동기 처리 때문)
  };

  return (
    <div>
      <h1>카운트: {count}</h1>
      <button onClick={handleClick}>카운트 증가</button>
    </div>
  );
}

설명:

• 버튼을 클릭하면 setCount가 실행되지만, 상태 업데이트는 비동기적으로 처리되기 때문에
  바로 화면이 업데이트되지 않고 console.log에는 이전 값이 출력됩니다.

flushSync를 사용한 상태 업데이트

import React, { useState } from 'react';
import { flushSync } from 'react-dom';

export default function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    flushSync(() => {
      setCount(count + 1);
    });
    console.log(count); // 즉시 업데이트된 값이 출력됩니다
  };

  return (
    <div>
      <h1>카운트: {count}</h1>
      <button onClick={handleClick}>카운트 증가</button>
    </div>
  );
}

 

🔍 코드 설명

1. flushSync 사용
   • flushSync 안에서 setCount를 실행하면 React가 즉시 상태를 업데이트하고 화면에 반영해요.
2. 즉시 렌더링 확인
   • console.log를 실행하면 최신 상태 값이 출력됩니다.
   • React가 비동기 처리 대신 즉시 상태를 렌더링했기 때문이에요.

 

🚀 언제 flushSync를 사용하면 좋을까요?

1. 상태 업데이트 직후에 DOM이 즉시 업데이트되어야 할 때
   • 예: 애니메이션이나 레이아웃 계산이 상태 변화 직후에 즉시 적용되어야 하는 경우
2. 연속된 상태 업데이트가 정확하게 반영되어야 할 때
   • 예: 특정 순서에 따라 상태를 업데이트하고 바로 확인해야 할 때
3. UI 동기화가 중요한 상황
   • 예: 화면에 중요한 피드백(에러 메시지, 로딩 표시 등)을 즉시 보여줘야 할 때

 

⚠️ 주의할 점

1. 성능 저하 가능성
   • flushSync를 너무 자주 사용하면 React의 비동기 최적화가 무시되어 성능이 저하될 수 있어요.
   • 꼭 필요한 상황에서만 사용해야 합니다.
2. React 18 이상에서만 사용 가능
   • flushSync는 React 18 버전부터 지원되기 때문에 버전을 확인하세요.

 

🌟 한 줄 요약

**flushSync**는 React에서 상태 업데이트를 즉시 실행하고 화면에 바로 반영하도록 강제하는 함수입니다.

 

 

🎉 마무리

React는 기본적으로 상태 업데이트를 비동기적으로 처리해서 성능을 최적화하지만,
때로는 상태가 즉시 반영되어야 하는 상황이 생기죠.
그럴 때 **flushSync**를 사용하면 React가 강제로 화면을 업데이트하도록 도와줍니다.

다만 너무 자주 사용하면 성능에 부담이 될 수 있으니 꼭 필요한 상황에서만 사용하는 걸 추천드려요! 😊