외부 저장소 구독의 문제

외부 스토어는 리액트 트리 밖에 존재하는 모든 상태 원천을 말합니다. 예를 들어 리덕스 스토어, matchMedia와 같은 브라우저 API, 자체 구독 메커니즘을 가진 단순한 모듈 수준 객체가 있습니다.

리액트가 이 상태를 소유하지 않으므로, 변경을 구독하고 스냅샷을 읽어 스토어가 현재 보유한 값과 컴포넌트를 동기화해야 합니다.

일반적인 방식은 스토어 값을 useState로 읽어 온 다음 useEffect를 사용해 구독하고, 스토어가 변경될 때마다 setState를 호출하는 것입니다. 겉보기에는 이렇게 하면 컴포넌트를 최신 상태로 유지할 수 있을 것 같습니다.

간단한 동기 렌더링에서는 작동하지만, 리액트가 동시 렌더링을 수행하며 작업을 도중에 일시 중지하거나 다시 시작할 수 있게 되면 미묘한 결함이 드러납니다.

티어링은 한 번의 렌더링 과정에서 UI의 서로 다른 부분이 같은 스토어의 서로 다른 값을 표시할 때 발생합니다. 동시 렌더링은 작업을 중단했다가 다시 시작할 수 있고, 그 사이에 스토어가 변경될 수 있습니다.

그 결과 한 컴포넌트는 이전 값을 표시하고 다른 컴포넌트는 새 값을 표시하는 일관되지 않은 화면이 나타납니다. 동시 기능이 도입되기 전에는 사실상 불가능했던 불일치입니다.

리액트가 동시 렌더링을 수행하는 동안 여러 컴포넌트가 테마 스토어를 읽는 상황을 생각해 보십시오. 사용자가 렌더링 도중 다크 모드를 전환하면 전환 전에 렌더링된 컴포넌트는 밝은 테마를 표시하고 전환 후에 렌더링된 컴포넌트는 어두운 테마를 표시합니다.

리액트가 스토어 값의 변경을 원자적인 작업으로 처리하지 않았기 때문에 한 프레임 동안 화면의 절반은 밝고 절반은 어두운 상태가 됩니다.

이펙트는 렌더링이 커밋된 후 실행되므로 useEffect 기반 구독만으로는 렌더링 중 읽은 값이 커밋 시점의 스토어와 일치한다고 보장할 수 없습니다. 구독이 너무 늦게 실행되어 일관되지 않은 화면 그리기를 막지 못합니다.

이펙트가 다시 구독하고 상태를 갱신할 때쯤이면 일관되지 않은 프레임이 이미 사용자에게 표시되었을 수 있습니다.

useMutableSource라는 초기 실험적 API는 동시 렌더링에서도 안전한 외부 읽기를 해결하려 했지만, API를 올바르게 사용하기가 어려운 것으로 드러났고 안정 버전으로 출시되지 않았습니다.

리액트 팀은 까다로운 부분 없이 동일한 일관성 보장을 제공하는 더 간단하고 사용하기 편한 기본 요소로 이를 대체했습니다.

useSyncExternalStore는 동시 렌더링에서도 안전한 방식으로 외부 스토어를 구독하기 위한 공식 훅입니다. 이 훅은 리액트와 협력하여 한 번의 렌더링 과정에서 읽기가 일관되게 유지되도록 하고 컴포넌트 간 티어링이 발생하지 않게 합니다.

동시 렌더링 환경에서 외부 상태를 리액트에 안정적으로 연결해야 하는 라이브러리 작성자에게 권장되는 기본 요소가 되었습니다.

외부 스토어를 구독하는 상태 라이브러리가 직접적인 영향을 받았으며, 리덕스, 몹엑스, 발티오가 여기에 포함됩니다. 동시 기능이 출시된 후에도 안전하게 동작하려면 각 라이브러리가 새로운 기본 요소를 도입해야 했습니다.

그래서 이러한 리액트 연동 계층은 이전의 useState와 useEffect 조합에 의존하는 대신 내부적으로 useSyncExternalStore를 호출하도록 업데이트되었습니다.

이 훅은 렌더링 중 저장소를 읽는 모든 컴포넌트가 동일한 스냅샷을 보도록 보장하며, 저장소가 변경되어 테어링이 발생할 수 있는 경우 동기식 재렌더링을 강제합니다.

일관된 스냅샷과 동시성 안전성을 함께 제공한다는 점이 직접 구현한 구독 방식에 비해 이 훅이 제공하는 핵심 가치입니다.

useSyncExternalStore를 사용하면 React의 렌더링 모델이 발전하더라도 구독이 올바르게 유지됩니다. 프레임워크가 제공하는 보장을 직접 불완전하게 다시 구현하는 대신 그대로 활용하는 것입니다.

따라서 외부 기준 데이터를 React 컴포넌트에 연결할 때 오래 유지되며 권장되는 방식이 됩니다.

동시 렌더링에서 테어링이 무엇을 의미하는지 확인합니다.

외부 저장소는 React 밖에 존재하며, 순진한 useState와 useEffect를 이용한 구독으로는 렌더링이 동시적으로 이루어질 때 테어링을 막을 수 없습니다. 효과는 너무 늦게 실행되므로 하나의 렌더링 안에서 읽는 값을 일관되게 유지하지 못합니다.

useSyncExternalStore는 더 이상 사용되지 않는 useMutableSource를 대신하며, 일관된 스냅샷과 동시성 안전성을 제공합니다. Redux, MobX, Valtio 같은 라이브러리는 이를 저장소 구독을 위한 미래에도 안정적인 기본 도구로 채택했습니다.