useSyncExternalStore로 사용자 지정 저장소 구축

사용자 지정 저장소에는 세 가지가 필요합니다. 상태, 리스너를 등록하는 구독 메서드, 현재 상태를 읽는 getSnapshot 메서드입니다. 이것이 useSyncExternalStore가 요구하는 전체 계약입니다.

저장소를 이렇게 작게 유지하면 프레임워크와 무관하게 만들 수 있으므로, React 안팎에서 같은 저장소를 사용할 수 있습니다.

createStore 팩토리는 초기값을 받아 getSnapshot, 구독, 업데이트 메서드가 있는 객체를 반환합니다. 내부에는 현재 상태와 리스너 콜백 집합이 저장됩니다.

이 팩토리 패턴을 사용하면 재사용 가능한 하나의 함수로 서로 독립적인 여러 저장소를 만들 수 있습니다.

업데이트 함수가 상태를 변경하면 새 값을 설정한 다음 등록된 모든 리스너를 호출합니다. 이러한 리스너는 구독 과정에서 React가 제공한 콜백입니다.

리스너를 호출하면 저장소가 변경되었다는 사실을 React에 알려 주므로, React가 getSnapshot을 다시 읽고 저장소를 읽는 모든 컴포넌트를 다시 렌더링합니다.

컴포넌트는 저장소의 구독 및 getSnapshot 메서드를 사용해 useSyncExternalStore를 호출하여 저장소의 값을 읽습니다. 훅은 현재 값을 반환하고 값이 변경되면 다시 렌더링합니다.

이를 useStore 같은 사용자 지정 훅으로 감싸면 컴포넌트가 매번 훅의 인수를 직접 연결하는 대신 하나의 함수만 호출할 수 있습니다.

저장소는 모듈 수준 객체이므로 이를 가져오는 모든 컴포넌트가 동일한 상태를 공유하며, 컨텍스트 공급자가 필요하지 않습니다. 감싸야 할 트리도 없고 속성을 여러 단계로 전달할 필요도 없습니다.

이것이 외부 저장소의 주요 장점 중 하나입니다. 공급자 계층 대신 가져와 사용하는 단순한 모델로 전역 상태를 공유할 수 있습니다.

하나의 거대한 저장소 대신 여러 개의 작은 저장소를 만들고 각 저장소가 상태의 한 조각을 소유하게 할 수 있습니다. 컴포넌트는 자신이 관심 있는 조각만 구독합니다.

이렇게 하면 관심사를 분리하고 재렌더링을 제한할 수 있습니다. 한 조각이 변경되어도 다른 조각을 읽는 컴포넌트에는 영향을 주지 않기 때문입니다.

인기 있는 최소 상태 관리 라이브러리인 Zustand는 정확히 이 패턴을 기반으로 하며, 4버전부터 내부적으로 useSyncExternalStore를 사용합니다. 작은 API는 본질적으로 선택자 계층을 추가한 다듬어진 createStore입니다.

이 연결을 이해하면 이러한 라이브러리가 신비롭게 느껴지지 않습니다. 직접 만들 수 있는 동일한 기본 도구를 얇고 사용하기 편하게 감싼 래퍼일 뿐입니다.

구성 요소가 사용하는 상태 부분만 반환하는 선택자를 getSnapshot에 전달하면, 해당 부분이 변경될 때만 구성 요소가 다시 렌더링되도록 할 수 있습니다.

이를 위해서는 선택자 결과가 안정적이어야 하므로, 파생 값은 메모이제이션하여 새 참조로 인한 무한 루프를 피하면서 관련 상태 조각으로 업데이트 범위를 제한해야 합니다.

디버깅을 위해 저장소에 레이블을 연결하고 변경 사항을 기록하거나, 브라우저 개발자 도구와 통합하여 어느 저장소가 언제 변경되었는지 추적할 수 있습니다.

update 내부에 개발 플래그로 실행 여부를 제어하는 간단한 콘솔 기록만 추가해도 저장소를 만드는 동안 상태 흐름을 이해하는 데 도움이 됩니다.

저장소는 일반 JavaScript이므로 로직을 직접 테스트할 수 있습니다. 아무것도 렌더링하지 않고 update를 호출한 다음 getSnapshot이 새 값을 반환하는지 확인하면 됩니다.

또한 저장소에서 값을 읽는 구성 요소를 렌더링하여 React 내부에서도 테스트할 수 있으며, update 후 다시 렌더링되는지 확인하면 저장소와 통합을 모두 검증할 수 있습니다.

사용자 지정 저장소 subscribe 메서드의 규약을 떠올려 보십시오.

사용자 지정 저장소에는 상태, subscribe, getSnapshot이 필요합니다. createStore 생성 함수와 리스너에게 알림을 보내는 update를 함께 사용하면 Provider 없이 공유 전역 상태를 만들 수 있습니다. 모듈을 가져올 때 하나의 인스턴스를 공유하기 때문입니다.

여러 상태 조각 저장소와 선택자를 사용해 다시 렌더링을 제한하되, 참조가 안정적인지 기억해야 합니다. Zustand v4+는 정확히 이 패턴을 기반으로 하며, 일반 JavaScript 저장소는 React 안팎에서 쉽게 테스트할 수 있습니다.