@ryujaewan/restate NPM

Restate

Restate는 React 애플리케이션에서 전역 상태 관리를 간단하고 효율적으로 구현할 수 있는 라이브러리입니다. 복잡한 설정 없이 직관적인 API로 컴포넌트 간 상태 공유가 가능합니다.

특징

🚀 간단한 API - 복잡한 보일러플레이트 코드 없이 직관적인 사용법
🔄 자동 업데이트 - 상태 변경 시 구독 컴포넌트 자동 리렌더링
🎯 선택적 업데이트 - 다양한 업데이트 전략으로 성능 최적화
🧠 동적 구독 - 컴포넌트가 마운트될 때만 상태 업데이트 구독
🔌 외부 데이터 연동 - 외부 데이터 소스와 쉽게 연결

설치

npm install @ryujaewan/restate

또는

yarn add @ryujaewan/restate

기본 사용법

import { restate } from '@ryujaewan/restate';

// 전역 상태 생성
const useCounter = restate(0);

// 컴포넌트에서 사용
function Counter() {
  const count = useCounter();
  
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => useCounter.set(count + 1)}>증가</button>
    </div>
  );
}

고급 사용법

객체 상태 관리

import { restate } from '@ryujaewan/restate';

// 객체 상태 생성
const useUserState = restate(
  { name: '홍길동', age: 30, preferences: { theme: 'dark' } }
);

function UserProfile() {
  const user = useUserState();
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>나이: {user.age}</p>
      <p>테마: {user.preferences.theme}</p>
      
      <button onClick={() => useUserState.set({ ...user, age: user.age + 1 })}>
        생일 축하!
      </button>
    </div>
  );
}

외부 데이터 연동

import { restate } from '@ryujaewan/restate';

// 웹소켓 연결과 상태 동기화
const useSocketMessages = restate([], ({ setState }) => {
  const socket = new WebSocket('wss://example.com/socket');
  
  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    setState(prev => [...prev, message]);
  };
  
  // 정리 함수 반환
  return () => socket.close();
});

컴포넌트별 업데이트 조건 설정

function SpecificComponent() {
  // 이 컴포넌트는 name이 변경될 때만 리렌더링
  const user = useUserState((prev, next) => prev.name !== next.name);
  
  return <div>{user.name}</div>;
}