useSyncExternalStore

 

🎯 useSyncExternalStore란 무엇일까요?

**useSyncExternalStore**는 **외부 저장소(데이터)**의 상태를 React 컴포넌트에 동기화시킬 때 사용하는 훅이에요.

이 훅은 주로 외부 상태 관리 라이브러리(예: Redux, Zustand 등)를 React 컴포넌트와 함께 사용할 때 유용해요.
외부 저장소에서 값이 바뀌면 화면에 즉시 반영되도록 도와주는 역할을 해요.

 

🏠 실생활 비유: 뉴스 알림판

동네에 뉴스 알림판이 하나 있다고 생각해 봐요. 📰

• 이 알림판은 외부 저장소처럼 여러 곳에서 관리돼요.
• 사람들이 알림판의 내용을 보고 최신 소식을 확인하죠.
• 뉴스가 바뀌면 알림판에 즉시 반영되고, 사람들은 새 소식을 확인하게 됩니다.

여기서 **useSyncExternalStore**는 알림판을 실시간으로 확인하고, 내용이 바뀌면 화면에 바로 보여주는 역할을 해요!

 

🛠️ useSyncExternalStore 기본 사용법

React 코드로 예시를 만들어 볼게요.
외부 저장소에 저장된 데이터를 화면에 보여주고, 데이터가 바뀌면 즉시 화면을 업데이트하는 예제입니다.

 

1. 간단한 외부 저장소 만들기

// 외부 저장소 (store)를 만듭니다.
const store = {
  value: 0, // 초기 상태
  listeners: new Set(), // 상태 변경 시 실행할 리스너들

  // 상태를 구독하는 함수
  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener); // 구독 해제
  },

  // 상태를 가져오는 함수
  getSnapshot() {
    return this.value;
  },

  // 상태를 업데이트하는 함수
  setValue(newValue) {
    this.value = newValue;
    this.listeners.forEach((listener) => listener()); // 모든 리스너 실행
  },
};

export default store;

 

2. useSyncExternalStore로 외부 상태 사용하기

import React, { useSyncExternalStore } from "react";
import store from "./store";

function Counter() {
  // 외부 저장소의 상태를 구독합니다.
  const value = useSyncExternalStore(
    store.subscribe, // 상태가 바뀔 때 실행될 구독 함수
    store.getSnapshot // 현재 상태 값을 가져오는 함수
  );

  const increment = () => {
    store.setValue(value + 1); // 외부 상태를 업데이트
  };

  return (
    <div>
      <h1>카운터: {value}</h1>
      <button onClick={increment}>+1 증가</button>
    </div>
  );
}

export default Counter;

 

🔍 코드 설명

1. 외부 저장소 (store)
   • store는 값(value)을 가지고 있고, 구독(subscribe)과 상태 조회(getSnapshot) 기능을 제공해요.
   • setValue를 호출하면 값이 바뀌고, 구독한 리스너들이 실행됩니다.
2. useSyncExternalStore 사용
   • useSyncExternalStore를 통해 외부 저장소를 React 컴포넌트와 연결해요.
   • store.subscribe는 상태가 변경될 때 실행될 구독 함수입니다.
   • store.getSnapshot은 현재 상태 값을 가져오는 함수입니다.
3. 상태 업데이트
   • 버튼 클릭 시 store.setValue를 호출해서 외부 저장소의 값을 바꿉니다.
   • 값이 바뀌면 useSyncExternalStore가 알아서 화면을 다시 그려줘요.

 

🧩 언제 useSyncExternalStore를 사용할까요?

1. 외부 상태 관리 라이브러리와 함께 사용할 때
   • Redux, Zustand, MobX 같은 외부 상태 관리 도구와 React를 연결할 때 유용해요.
2. 실시간 데이터 업데이트
   • 외부에서 상태가 바뀌면 React 컴포넌트도 바로 반응해야 할 때 사용해요.
3. 성능 최적화
   • useSyncExternalStore는 상태 변화를 최적화된 방식으로 감지해서 React 렌더링을 최소화해요.

 

🚀 한 줄 요약

useSyncExternalStore는 외부 저장소의 상태를 React 컴포넌트에 실시간으로 동기화하는 훅이에요.