React useSyncExternalStore: 외부 상태 동기화 마스터하기

useSyncExternalStore는 React 18에 도입된 훅으로, 동시성 렌더링과 호환되는 방식으로 외부 데이터 소스를 구독하고 읽을 수 있게 해줍니다. 이 훅은 React의 관리 상태와 서드파티 라이브러리, 브라우저 API 또는 다른 UI 프레임워크의 데이터와 같은 외부 상태 간의 간극을 메워줍니다. 이제 그 목적, 구현 및 이점에 대해 깊이 파고들어 보겠습니다.

useSyncExternalStore의 필요성 이해하기

React의 내장 상태 관리(useState, useReducer, Context API)는 React 컴포넌트 트리와 밀접하게 연결된 데이터에 대해 매우 잘 작동합니다. 하지만 많은 애플리케이션은 React의 제어 범위를 *벗어난* 데이터 소스와 통합해야 합니다. 이러한 외부 소스에는 다음이 포함될 수 있습니다:

• 서드파티 상태 관리 라이브러리: Zustand, Jotai 또는 Valtio와 같은 라이브러리와 통합.
• 브라우저 API: localStorage, IndexedDB 또는 네트워크 정보 API의 데이터에 접근.
• 서버에서 가져온 데이터: React Query나 SWR과 같은 라이브러리가 종종 선호되지만, 때로는 직접적인 제어를 원할 수 있습니다.
• 다른 UI 프레임워크: React가 다른 UI 기술과 공존하는 하이브리드 애플리케이션.

React 컴포넌트 내에서 이러한 외부 소스를 직접 읽고 쓰는 것은 특히 동시성 렌더링에서 문제를 일으킬 수 있습니다. React가 새 화면을 준비하는 동안 외부 소스가 변경되면, React는 오래된(stale) 데이터로 컴포넌트를 렌더링할 수 있습니다. useSyncExternalStore는 React가 외부 상태와 안전하게 동기화할 수 있는 메커니즘을 제공하여 이 문제를 해결합니다.

useSyncExternalStore의 작동 방식

useSyncExternalStore 훅은 세 가지 인수를 받습니다:

1. subscribe: 콜백 함수를 인수로 받는 함수입니다. 이 콜백은 외부 스토어가 변경될 때마다 호출됩니다. 이 함수는 호출되었을 때 외부 스토어의 구독을 취소하는 함수를 반환해야 합니다.
2. getSnapshot: 외부 스토어의 현재 값을 반환하는 함수입니다. React는 렌더링 중에 스토어의 값을 읽기 위해 이 함수를 사용합니다.
3. getServerSnapshot (선택 사항): 서버에서 외부 스토어의 초기 값을 반환하는 함수입니다. 이것은 서버 사이드 렌더링(SSR)에만 필요합니다. 제공되지 않으면 React는 서버에서 getSnapshot을 사용합니다.

이 훅은 getSnapshot 함수에서 얻은 외부 스토어의 현재 값을 반환합니다. React는 getSnapshot이 반환하는 값이 변경될 때마다 컴포넌트가 다시 렌더링되도록 보장하며, 이는 Object.is 비교를 통해 결정됩니다.

기본 예제: localStorage와 동기화하기

useSyncExternalStore를 사용하여 localStorage와 값을 동기화하는 간단한 예제를 만들어 보겠습니다.

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

이 예제에서:

• subscribe: window 객체의 storage 이벤트를 수신합니다. 이 이벤트는 다른 탭이나 창에서 localStorage가 수정될 때마다 발생합니다.
• getSnapshot: localStorage에서 myValue의 값을 가져옵니다.
• getServerSnapshot: 서버 사이드 렌더링을 위한 기본값을 반환합니다. 사용자가 이전에 값을 설정했다면 쿠키에서 가져올 수도 있습니다.
• MyComponent: useSyncExternalStore를 사용하여 localStorage의 변경 사항을 구독하고 현재 값을 표시합니다.

고급 사용 사례 및 고려 사항

1. 서드파티 상태 관리 라이브러리와 통합하기

useSyncExternalStore는 React 컴포넌트를 외부 상태 관리 라이브러리와 통합할 때 빛을 발합니다. Zustand를 사용한 예제를 살펴보겠습니다:

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

이 예제에서는 useSyncExternalStore를 사용하여 Zustand 스토어의 변경 사항을 구독합니다. useStore.subscribe와 useStore.getState를 훅에 직접 전달하여 통합이 원활하게 이루어지는 것을 확인하세요.

2. 메모이제이션으로 성능 최적화하기

getSnapshot은 모든 렌더링에서 호출되므로 성능이 좋도록 보장하는 것이 중요합니다. getSnapshot 내에서 비용이 많이 드는 계산을 피하세요. 필요한 경우 useMemo나 유사한 기술을 사용하여 getSnapshot의 결과를 메모이즈하세요.

다음과 같은 (잠재적으로 문제가 될 수 있는) 예제를 고려해 보세요:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

이 예제에서 getSnapshot(useSyncExternalStore의 두 번째 인수로 전달된 인라인 함수)은 큰 배열에 대해 비용이 많이 드는 map 연산을 수행합니다. 이 연산은 기본 데이터가 변경되지 않았더라도 *모든* 렌더링에서 실행됩니다. 이를 최적화하기 위해 결과를 메모이즈할 수 있습니다:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

이제 map 연산은 externalStore.getState()가 변경될 때만 수행됩니다. 참고: 스토어가 동일한 객체를 변경하는 경우 실제로 `externalStore.getState()`를 깊은 비교(deep compare)하거나 다른 전략을 사용해야 합니다. 이 예제는 설명을 위해 단순화되었습니다.

3. 동시성 렌더링 처리하기

useSyncExternalStore의 주요 이점은 React의 동시성 렌더링 기능과의 호환성입니다. 동시성 렌더링을 통해 React는 여러 버전의 UI를 동시에 준비할 수 있습니다. 동시 렌더링 중에 외부 스토어가 변경되면, useSyncExternalStore는 React가 변경 사항을 DOM에 커밋할 때 항상 최신 데이터를 사용하도록 보장합니다.

useSyncExternalStore가 없으면 컴포넌트가 오래된 데이터로 렌더링되어 시각적 불일치와 예기치 않은 동작을 유발할 수 있습니다. useSyncExternalStore의 getSnapshot 메서드는 동기적이고 빠르게 설계되어 React가 렌더링 중에 외부 스토어가 변경되었는지 신속하게 판단할 수 있도록 합니다.

4. 서버 사이드 렌더링(SSR) 고려 사항

서버 사이드 렌더링과 함께 useSyncExternalStore를 사용할 때는 getServerSnapshot 함수를 제공하는 것이 필수적입니다. 이 함수는 서버에서 외부 스토어의 초기 값을 가져오는 데 사용됩니다. 이 함수가 없으면 React는 서버에서 getSnapshot을 사용하려고 시도할 것이며, 외부 스토어가 브라우저 특정 API(예: localStorage)에 의존하는 경우 이는 불가능할 수 있습니다.

getServerSnapshot 함수는 기본값을 반환하거나 서버 측 소스(예: 쿠키, 데이터베이스)에서 데이터를 가져와야 합니다. 이렇게 하면 서버에서 렌더링된 초기 HTML에 올바른 데이터가 포함되도록 보장합니다.

5. 오류 처리

특히 외부 데이터 소스를 다룰 때는 강력한 오류 처리가 중요합니다. 잠재적인 오류를 처리하기 위해 getSnapshot 및 getServerSnapshot 함수를 try...catch 블록으로 감싸세요. 오류를 적절히 기록하고 애플리케이션이 충돌하는 것을 방지하기 위해 대체 값을 제공하세요.

6. 재사용성을 위한 커스텀 훅

코드 재사용성을 높이기 위해 useSyncExternalStore 로직을 커스텀 훅 내에 캡슐화하세요. 이렇게 하면 여러 컴포넌트에서 로직을 더 쉽게 공유할 수 있습니다.

예를 들어, localStorage의 특정 키에 접근하기 위한 커스텀 훅을 만들어 보겠습니다:

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

이제 어떤 컴포넌트에서든 이 훅을 쉽게 사용할 수 있습니다:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

모범 사례

• getSnapshot을 빠르게 유지하세요: getSnapshot 함수 내에서 비용이 많이 드는 계산을 피하세요. 필요한 경우 결과를 메모이즈하세요.
• SSR을 위해 getServerSnapshot을 제공하세요: 서버에서 렌더링된 초기 HTML에 올바른 데이터가 포함되도록 하세요.
• 커스텀 훅을 사용하세요: 더 나은 재사용성과 유지보수성을 위해 useSyncExternalStore 로직을 커스텀 훅 내에 캡슐화하세요.
• 오류를 우아하게 처리하세요: getSnapshot과 getServerSnapshot을 try...catch 블록으로 감싸세요.
• 구독을 최소화하세요: 컴포넌트가 실제로 필요로 하는 외부 스토어의 부분만 구독하세요. 이는 불필요한 재렌더링을 줄입니다.
• 대안을 고려하세요: useSyncExternalStore가 정말로 필요한지 평가하세요. 간단한 경우에는 다른 상태 관리 기술이 더 적절할 수 있습니다.

useSyncExternalStore의 대안

useSyncExternalStore는 강력한 도구이지만 항상 최상의 솔루션은 아닙니다. 다음과 같은 대안을 고려해 보세요:

• 내장 상태 관리(useState, useReducer, Context API): 데이터가 React 컴포넌트 트리와 밀접하게 연결되어 있다면 이러한 내장 옵션으로 충분한 경우가 많습니다.
• React Query/SWR: 데이터 페칭을 위해 이러한 라이브러리들은 훌륭한 캐싱, 무효화 및 오류 처리 기능을 제공합니다.
• Zustand/Jotai/Valtio: 이러한 미니멀한 상태 관리 라이브러리들은 애플리케이션 상태를 관리하는 간단하고 효율적인 방법을 제공합니다.
• Redux/MobX: 전역 상태를 가진 복잡한 애플리케이션의 경우, Redux나 MobX가 더 나은 선택일 수 있습니다 (더 많은 보일러플레이트를 도입하긴 하지만).

선택은 애플리케이션의 특정 요구 사항에 따라 달라집니다.

결론

useSyncExternalStore는 React 툴킷에 추가된 귀중한 기능으로, 동시성 렌더링과의 호환성을 유지하면서 외부 상태 소스와의 원활한 통합을 가능하게 합니다. 그 목적, 구현 및 고급 사용 사례를 이해함으로써 이 훅을 활용하여 다양한 소스의 데이터와 효과적으로 상호 작용하는 견고하고 성능이 뛰어난 React 애플리케이션을 구축할 수 있습니다.

useSyncExternalStore를 사용하기 전에 성능을 우선시하고, 오류를 우아하게 처리하며, 대안적인 해결책을 고려하는 것을 잊지 마세요. 신중한 계획과 구현을 통해 이 훅은 React 애플리케이션의 유연성과 강력함을 크게 향상시킬 수 있습니다.

더 알아보기

• useSyncExternalStore에 대한 React 공식 문서
• 다양한 상태 관리 라이브러리(Zustand, Jotai, Valtio) 예제
• useSyncExternalStore와 다른 접근 방식을 비교하는 성능 벤치마크