restate / v1.0.0

시작하기

restate를 설치하고, 컴포넌트 사이에 첫 값을 공유하고, 같은 스토어를 React 밖에서도 사용합니다.

이 페이지에서

설치 첫 번째 공유 상태 값 바꾸기 React 밖에서 쓰기 TypeScript React Native 모든 플랫폼에서 같은 선언

설치

restate는 React 16.8 이상에서 동작합니다. TypeScript 선언이 포함되어 있고 다른 런타임 의존성은 없습니다.

npm install @kkwaenggwari/restate

첫 번째 공유 상태

스토어는 컴포넌트 밖에서 한 번 만듭니다. restate가 반환하는 값은 훅이면서 set, get 같은 메서드를 가진 객체입니다.

Editor와 CharacterCount 사이에는 props도 Provider도 없습니다. 한쪽에 입력하면 다른 쪽이 바뀝니다.

화면에서 보이는 것

type "Hi"
Editor          → Hi
CharacterCount  → 2 characters

두 컴포넌트가 같은 스토어를 읽습니다. 글자 수는 text.length를 선택하므로 길이가 바뀔 때만 다시 렌더합니다.

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

export const useDraft = restate('');

export function Editor() {
  const text = useDraft();
  return <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />;
}

export function CharacterCount() {
  const count = useDraft((text) => text.length);
  return <span>{count} characters</span>;
}

값 바꾸기

set은 새 값이나 이전 값을 받는 함수를 받습니다. reset은 선언한 값으로 돌아갑니다.

값은 불변으로 다루세요. 이전 객체를 고치지 말고 새 객체나 배열을 반환해야 selector가 변화를 알아챕니다.

cart.items에 push하고 useCart.set(cart)를 불렀습니다. 왜 아무것도 다시 렌더하지 않을까요?

스토어가 같은 객체를 받아 Object.is가 변화 없음으로 판단합니다. useCart.set(cart => ({ ...cart, items: [...cart.items, item] }))처럼 새 객체를 반환하세요.

useCount.set(10); // replace the value
useCount.set((count) => count + 1); // compute from the previous value
useCount.reset(); // back to the declared initial value

React 밖에서 쓰기

같은 스토어를 이벤트 핸들러, 서비스, 테스트에서도 씁니다. get은 현재 값을 읽고, subscribe는 변경마다 호출하며 구독을 멈추는 함수를 반환합니다.

import { useCart } from './stores/cart';

// Any module, event handler or test can use the same store.
const current = useCart.get();
useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }));

const stop = useCart.subscribe((cart, previous) => {
  console.log(previous.items.length, '→', cart.items.length);
});
stop();

TypeScript

상태 타입을 한 번만 넘기세요. selector, set, 모든 메서드가 그 타입을 따릅니다.

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

type Cart = { items: string[]; coupon: string };

export const useCart = restate<Cart>({ items: [], coupon: '' });

const count = useCart((cart) => cart.items.length); // number
useCart.set((cart) => ({ ...cart, coupon: 'SPRING' }));

React Native

메모리 스토어는 React Native에서도 추가 설정이 필요 없습니다. 상태를 저장하려면 react-native-mmkv를 설치하세요. React Native 진입점이 자동으로 불러옵니다.

일반 프로젝트는 설치 후 iOS에서 pod install을 실행합니다. Expo에서는 MMKV가 네이티브 모듈이므로 개발 빌드를 사용하세요.

npm install @kkwaenggwari/restate react-native-mmkv@4 react-native-nitro-modules

모든 플랫폼에서 같은 선언

저장 스토어는 브라우저에서 IndexedDB, React Native에서 MMKV를 씁니다. 선언과 컴포넌트는 그대로입니다.

import { persistedRestate } from '@kkwaenggwari/restate';

// IndexedDB on the web, MMKV on React Native. Same declaration.
export const useDraft = persistedRestate('', { key: 'draft' });

restate 1.0 API 기준