이 글에서는 테스트 케이스 내에서, 특히 React용으로 널리 사용되는 상태 관리 라이브러리인 Zustand에서 ReactDOM.unstable_batchedUpdates를 사용하는 방법을 살펴보겠습니다. 또한 테스트를 세분화하고 일괄 업데이트가 불필요한 재렌더링을 최소화하여 React의 성능을 향상시키는 방법을 설명하겠습니다.

테스트 사례 이해

우리가 조사할 테스트 사례는 다음과 같습니다.

이 테스트 케이스는 React의 렌더링 시스템과 함께 Zustand를 사용할 때 일괄 업데이트가 적용될 수 있는지 확인하기 위해 작성되었습니다.

테스트 사례 분석

1. Zustand Store 설정: 첫 번째 단계에서는 생성 기능을 사용하여 Zustand 스토어를 생성합니다:

const useBoundStore = create(
  (set) => ({   
  count: 0,   
  inc: () => set((state) => ({ count: state.count   1 })), }))

여기서 저장소는 0으로 초기화된 count 속성과 count를 증가시키는 inc 함수를 사용하여 간단한 상태를 유지합니다. set 함수는 React의 setState와 유사하게 Zustand의 상태 업데이트 방식입니다.

2. Counter 구성 요소: Counter 구성 요소는 useBoundStore를 사용하여 현재 개수와 inc 함수를 검색합니다.

const { count, inc } = useBoundStore()

이 구성요소는 매장의 상태를 구독하며, 개수가 변경되면 새 값으로 다시 렌더링됩니다.

3. ReactDOM.unstable_batchedUpdates 사용 성능: useEffect 후크 내에서 inc 함수는 ReactDOM.unstable_batchedUpdates 블록 내에서 두 번 호출됩니다:

useEffect(() => {   
  ReactDOM.unstable_batchedUpdates(() => {     
    inc()     
    inc()   
  }) 
}, [inc])

여기서 마법이 일어납니다. 일반적으로 inc()를 호출할 때마다 별도의 업데이트가 트리거되어 두 개의 렌더링이 발생합니다. 그러나 이러한 호출을 불안정_배치 업데이트로 래핑함으로써 React는 단일 업데이트로 이를 함께 처리할 수 있으므로 결과적으로 단 한 번의 렌더링만 생성됩니다. 이는 렌더링 수를 줄여 성능을 최적화하며, 이는 성능이 중요한 애플리케이션에 특히 유용합니다.

4. 컴포넌트 렌더링 및 결과 확인 마지막으로 컴포넌트가 렌더링되고 테스트는 개수가 2:
에 도달할 때까지 기다립니다.

const { findByText } = render(
       
    >, 
)  

await findByText('count: 2')

이 어설션은 두 번 증가한 후 개수가 올바르게 업데이트되고 "count: 2"로 렌더링되도록 보장합니다.

ReactDOM.unstable_batchedUpdates란 무엇인가요?

ReactDOM.unstable_batchedUpdates는 단일 렌더링 주기에서 여러 상태 업데이트를 처리할 수 있도록 React에서 제공하는 메서드입니다. 기본적으로 React는 이벤트 핸들러(예: 클릭 이벤트) 내에서 트리거된 업데이트를 일괄 처리합니다. 즉, 사용자 상호 작용에 대한 응답으로 여러 상태를 업데이트하는 경우 React는 구성 요소를 한 번만 렌더링합니다. 그러나 이벤트 핸들러 외부(예: setTimeout 또는 useEffect 내)에서는 업데이트가 자동으로 일괄 처리되지 않습니다.

그러나 이는 React 18 이후에 변경되었습니다. 아래는 React.dev에서 선택한 스크린샷입니다.

문서에 따르면 시간 초과, 약속, 기본 이벤트 핸들러 또는 기타 이벤트 내부의 업데이트는 React 이벤트 내부의 업데이트와 동일한 방식으로 일괄 처리됩니다. 하지만 이 Zustand의 테스트 사례에서는 일괄 업데이트가 useEffect` 내부에 적용됩니다. 여기가 불안정한_batchedUpdates가 유용해지는 곳입니다. 이벤트 중심 컨텍스트 외부에서도 React가 여러 상태 업데이트를 단일 렌더링으로 그룹화하여 재렌더링을 최소화하고 성능을 향상시킵니다.

예:

불안정한_배치 업데이트 없음:

inc()  // triggers one render
inc()  // triggers another render

불안정한_배치 업데이트 포함:

ReactDOM.unstable_batchedUpdates(() => {
  inc()  // triggers only one render for both updates
  inc()
})

이 메소드는 React의 공식 공개 API의 일부가 아니기 때문에 "불안정"이라는 라벨이 붙어 있지만 여전히 성능 최적화를 위해 커뮤니티에서 널리 사용되고 있습니다. 향후 React의 새로운 동시 렌더링 기능의 일부로 더욱 안정적이거나 통합될 수 있습니다.

재미있는 사실: Zustand의 4.5.5 릴리스는 19.0.0-rc.0 버전을 사용합니다.

Zustand에서 ReactDOM.unstable_batchedUpdates를 사용하는 이유

Zustand는 React의 구성요소 수명주기와 함께 작동하는 경량 상태 관리 라이브러리입니다. Zustand는 상태 업데이트를 효율적으로 처리하지만 React의 반응성 시스템은 상태가 변경될 때마다 렌더링을 트리거합니다. 짧은 기간에 여러 상태 변경이 발생하는 시나리오에서 ReactDOM.unstable_batchedUpdates를 사용하면 여러 번 다시 렌더링되는 것을 방지하고 업데이트를 일괄 처리하여 더 원활하고 효율적인 사용자 경험을 제공할 수 있습니다.

제공된 테스트 사례에서 일괄 업데이트 내에서 inc를 두 번 호출하면 개수가 한 번만 업데이트되므로 각 업데이트를 개별적으로 실행하는 것보다 더 효율적입니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에 사용되는 고급 코드베이스 아키텍처 개념을 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배 높이고, 모범 사례를 배우고, 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 [email protected]으로 문의하세요!

참조:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L175C7-L175C39

2. https://dev.to/devmoustafa97/do-you-know-unstablebatchedupdates-in-react-enforce-batching-state-update-5cn2

3. https://dev.to/jackbuchananconroy/react-18-what-s-changed-automatic-batching-13ec

4. https://react.dev/blog/2022/03/08/react-18-upgrade-guide#automatic-batching

5. https://github.com/pmndrs/zustand/blob/v4.5.5/package.json#L246C4-L247C32