@ryujaewan/restate/README.md

React State (`@ryujaewan/restate` is a lightweight library that simplifies state management in React applications. It enables easy sharing and updating of state across multiple components.)

# Restate

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

## 특징

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

## 설치

```bash
npm install @ryujaewan/restate
```

또는

```bash
yarn add @ryujaewan/restate
```

## 기본 사용법

```jsx
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>
  );
}
```

## 고급 사용법

### 객체 상태 관리

```jsx
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>
  );
}
```

### 외부 데이터 연동

```jsx
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();
});
```

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

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

## API 레퍼런스

### `restate(initialValue, updater?)`

전역 상태를 생성합니다.

- `initialValue`: 초기 상태 값
- `updater`: 상태 업데이트 로직을 포함하는 선택적 함수

### 반환된 훅

- `useRestateFn()`: 컴포넌트에서 상태를 구독하는 훅
- `useRestateFn.get()`: 현재 상태 값을 가져오는 함수
- `useRestateFn.set(newValue)`: 상태를 업데이트하는 함수

## 예제 프로젝트

더 많은 예제는 [GitHub 저장소](https://github.com/ryujaewan123/restate)에서 확인하세요.

## 라이선스

MIT

---

Restate로 React 상태 관리의 복잡성을 줄이고, 더 효율적인 애플리케이션을 만들어보세요! 🚀