플레이그라운드

값을 바꾸고, restate의 반응을 보세요.

일곱 가지 실험이 실제 패키지를 실행합니다. 왼쪽 컨트롤러는 이 웹사이트의 것이고, 오른쪽 예제는 props만 받습니다. 그래서 예제 코드에는 여러분이 실제로 작성할 코드만 남습니다.

컨트롤러 — 웹사이트 전용props — 연결 다리예제 — 복사할 코드

두 화면, 하나의 스토어

여러 컴포넌트가 같은 값이 필요합니다. 한 번 선언하고 어디서나 읽으세요.

관찰할 것

증가 버튼을 누르면 모든 화면이 같은 순간에 새 숫자를 보여 줍니다.
화면 수를 바꾸면 새 화면은 현재 값에서 시작합니다.

컨트롤러예제 코드에 포함되지 않습니다. 값은 props로 예제에 전달됩니다.

읽는 화면 수readers
한 번에 더할 값step

<Example
  readers={3}
  step={1}
/>

예제를 준비하는 중…

실행 예제에는 JavaScript가 필요합니다. 아래 코드는 그대로 읽을 수 있습니다.

App.jsx

import { restate } from '@kkwaenggwari/restate';
import './styles.css';

const useCount = restate(0);

function Reader({ name }) {
  const count = useCount();

  return (
    <section className="card">
      <span>{name}</span>
      <output>{count}</output>
    </section>
  );
}

export default function Example({ readers = 3, step = 1 }) {
  return (
    <main>
      <div className="grid">
        {Array.from({ length: readers }, (_, index) => (
          <Reader key={index} name={`화면 ${index + 1}`} />
        ))}
      </div>
      <div className="actions">
        <button onClick={() => useCount.set((count) => count + step)}>+{step}</button>
        <button onClick={() => useCount.reset()}>처음으로</button>
      </div>
    </main>
  );
}

시작하기

바뀐 곳만 렌더

큰 스토어라도 변경마다 모든 컴포넌트를 다시 렌더하면 안 됩니다.

관찰할 것

메모 수정: 스토어 전체를 읽는 카드만 렌더합니다.
상품 추가: 상품 수와 요약만 렌더하고 쿠폰 카드는 그대로입니다.
shallow를 끄면 selector가 매번 새 객체를 반환하므로 요약이 변경마다 렌더합니다.

컨트롤러예제 코드에 포함되지 않습니다. 값은 props로 예제에 전달됩니다.

요약을 shallow로 비교shallowSummary

<Example
  shallowSummary={true}
/>

예제를 준비하는 중…

실행 예제에는 JavaScript가 필요합니다. 아래 코드는 그대로 읽을 수 있습니다.

App.jsx

import { memo, useRef } from 'react';
import { restate, shallow } from '@kkwaenggwari/restate';
import './styles.css';

const useCart = restate({ items: ['Book'], coupon: '', note: '' });

function Card({ title, value }) {
  const renders = useRef(0);
  renders.current += 1;

  return (
    <section className="card">
      <span>{title}</span>
      <output>{value}</output>
      <small>{`렌더 ${renders.current}회`}</small>
    </section>
  );
}

const ItemCount = memo(function ItemCount() {
  const count = useCart((cart) => cart.items.length);
  return <Card title="상품 수" value={count} />;
});

const Coupon = memo(function Coupon() {
  const coupon = useCart((cart) => cart.coupon);
  return <Card title="쿠폰" value={coupon || '없음'} />;
});

const Summary = memo(function Summary({ compare }) {
  const summary = useCart((cart) => ({ count: cart.items.length, coupon: cart.coupon }), compare);
  return <Card title="요약" value={`${summary.count} · ${summary.coupon || '-'}`} />;
});

const Whole = memo(function Whole() {
  const cart = useCart();
  return <Card title="스토어 전체" value={cart.note.length} />;
});

export default function Example({ shallowSummary = true }) {
  return (
    <main>
      <div className="grid">
        <ItemCount />
        <Coupon />
        <Summary compare={shallowSummary ? shallow : undefined} />
        <Whole />
      </div>
      <div className="actions">
        <button onClick={() => useCart.set((cart) => ({ ...cart, items: [...cart.items, 'Pen'] }))}>
          상품 추가
        </button>
        <button
          onClick={() => useCart.set((cart) => ({ ...cart, coupon: cart.coupon ? '' : 'SPRING' }))}
        >
          쿠폰 전환
        </button>
        <button onClick={() => useCart.set((cart) => ({ ...cart, note: cart.note + '!' }))}>
          메모 수정
        </button>
      </div>
    </main>
  );
}

필요한 것만 구독하기

여러 변경, 알림 한 번

두 스토어를 하나씩 바꾸면 구독자가 절반만 바뀐 상태를 볼 수 있습니다.

관찰할 것

따로 비우기: 구독자가 상품 0개와 이전 쿠폰을 함께 봅니다.
batch로 비우기: 두 스토어가 모두 바뀐 뒤 구독자가 한 번 실행됩니다.

컨트롤러예제 코드에 포함되지 않습니다. 값은 props로 예제에 전달됩니다.

상품 수quantity
쿠폰coupon

<Example
  quantity={3}
  coupon="SPRING"
/>

예제를 준비하는 중…

실행 예제에는 JavaScript가 필요합니다. 아래 코드는 그대로 읽을 수 있습니다.

App.jsx

import { useEffect, useState } from 'react';
import { batch, restate } from '@kkwaenggwari/restate';
import './styles.css';

const useItems = restate([]);
const useCoupon = restate('');

export default function Example({ quantity = 3, coupon = 'SPRING' }) {
  const items = useItems();
  const code = useCoupon();
  const [notices, setNotices] = useState([]);

  useEffect(() => {
    useItems.set(Array.from({ length: quantity }, (_, index) => `#${index + 1}`));
    useCoupon.set(coupon);
    setNotices([]);
  }, [quantity, coupon]);

  useEffect(
    () =>
      useItems.subscribe((next) => {
        const notice = `알림: 상품 ${next.length}개 · 쿠폰 ${useCoupon.get() || '-'}`;
        setNotices((list) => [...list, notice]);
      }),
    [],
  );

  const clear = () => {
    useItems.set([]);
    useCoupon.set('');
  };

  return (
    <main>
      <div className="grid">
        <section className="card">
          <span>상품</span>
          <output>{items.length}</output>
        </section>
        <section className="card">
          <span>쿠폰</span>
          <output>{code || '-'}</output>
        </section>
      </div>
      <div className="actions">
        <button onClick={clear}>따로 비우기</button>
        <button onClick={() => batch(clear)}>batch로 비우기</button>
      </div>
      <h2>구독자가 본 값</h2>
      <ol className="log">
        {notices.length ? (
          notices.map((notice, index) => <li key={index}>{notice}</li>)
        ) : (
          <li>아직 알림이 없습니다.</li>
        )}
      </ol>
    </main>
  );
}

필요한 것만 구독하기

저장은 원할 때

편집은 메모리만 바꿉니다. 저장은 명시적인 동작이고, 상태가 지금 무슨 일이 일어나는지 알려 줍니다.

관찰할 것

입력하면 dirty가 켜지고 아직 아무것도 쓰지 않습니다.
지연을 늘리고 저장하면 쓰는 동안 operation에 save가 표시됩니다.
다시 실행하면 저장한 초안이 IndexedDB에서 복원됩니다.

컨트롤러예제 코드에 포함되지 않습니다. 값은 props로 예제에 전달됩니다.

저장소 지연latency

<Example
  latency={600}
/>

예제를 준비하는 중…

실행 예제에는 JavaScript가 필요합니다. 아래 코드는 그대로 읽을 수 있습니다.

App.jsx

import { useEffect } from 'react';
import { persistedRestate } from '@kkwaenggwari/restate';
import { settings, slowStorage } from './storage.js';
import './styles.css';

const useDraft = persistedRestate('', { key: 'playground-draft', storage: slowStorage });

export default function Example({ latency = 600 }) {
  useEffect(() => {
    settings.latency = latency;
  }, [latency]);

  const text = useDraft();
  const { dirty, operation, pending, lastSavedAt } = useDraft.useStatus();
  // A failed save keeps dirty and records status.error.
  const save = () => useDraft.save().catch(() => {});
  const revert = () => useDraft.restore().catch(() => {});

  return (
    <main>
      <label>
        초안
        <textarea value={text} onChange={(event) => useDraft.set(event.target.value)} />
      </label>
      <div className="actions">
        <button disabled={!dirty} onClick={save}>
          저장
        </button>
        <button disabled={!dirty} onClick={revert}>
          되돌리기
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{dirty ? '저장하지 않은 변경' : '저장됨'}</dd>
        <dt>operation</dt>
        <dd>{operation ?? '없음'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>lastSavedAt</dt>
        <dd>{lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : '아직 없음'}</dd>
      </dl>
    </main>
  );
}

storage.js

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

// IndexedDB with an adjustable delay, to watch operations in progress.
const indexedDB = createIndexedDBStorage();
export const settings = { latency: 0 };
const wait = () => new Promise((resolve) => setTimeout(resolve, settings.latency));

export const slowStorage = {
  async getItem(key) {
    await wait();
    return indexedDB.getItem(key);
  },
  async setItem(key, value) {
    await wait();
    return indexedDB.setItem(key, value);
  },
  async removeItem(key) {
    await wait();
    return indexedDB.removeItem(key);
  },
};

저장은 원할 때

빠르게 입력해도 저장은 한 번

입력할 때마다 저장하면 저장소가 넘칩니다. autoSave는 입력이 멈출 때까지 기다립니다.

관찰할 것

문장을 입력하면 입력 수는 빠르게 오르고, 쓰기 수는 멈출 때마다 하나씩 늘어납니다.
매 변경을 고르면 입력마다 쓰지만, 저장된 값으로 되돌린 변경은 쓰지 않습니다.

컨트롤러예제 코드에 포함되지 않습니다. 값은 props로 예제에 전달됩니다.

autoSave 지연delayMs

<Example
  delayMs={800}
/>

예제를 준비하는 중…

실행 예제에는 JavaScript가 필요합니다. 아래 코드는 그대로 읽을 수 있습니다.

App.jsx

import { useState } from 'react';
import { persistedRestate, useRestateScope } from '@kkwaenggwari/restate';
import { countingStorage, useWrites } from './storage.js';
import './styles.css';

function Note({ delayMs }) {
  const useNote = useRestateScope((scope) =>
    persistedRestate('', {
      scope,
      key: 'note',
      storage: countingStorage,
      autoSave: delayMs ? { delayMs } : true,
    }),
  );
  const note = useNote();
  const dirty = useNote.useStatus((status) => status.dirty);
  const writes = useWrites();
  const [edits, setEdits] = useState(0);

  return (
    <>
      <label>
        메모
        <textarea
          value={note}
          placeholder="문장을 빠르게 입력해 보세요…"
          onChange={(event) => {
            useNote.set(event.target.value);
            setEdits((count) => count + 1);
          }}
        />
      </label>
      <div className="grid">
        <section className="card">
          <span>입력 수</span>
          <output>{edits}</output>
        </section>
        <section className="card accent">
          <span>저장소 쓰기</span>
          <output>{writes}</output>
        </section>
      </div>
      <p className={dirty ? 'badge warn' : 'badge ok'}>
        {dirty ? '입력이 멈추길 기다리는 중' : '저장됨'}
      </p>
    </>
  );
}

export default function Example({ delayMs = 800 }) {
  // autoSave is part of the declaration: a new delay starts a new scope.
  return (
    <main>
      <Note key={delayMs} delayMs={delayMs} />
    </main>
  );
}

storage.js

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

// An in-memory storage adapter that counts real writes.
const records = new Map();
export const useWrites = restate(0);

export const countingStorage = {
  getItem: (key) => records.get(key) ?? null,
  setItem: (key, value) => {
    records.set(key, value);
    useWrites.set((count) => count + 1);
  },
  removeItem: (key) => {
    records.delete(key);
  },
};

저장은 원할 때

장애 실험실

저장소를 느리게 하고, 실패시키고, 없애 보세요. restate가 데이터를 지키고 문제를 알려 주는 모습을 확인합니다.

관찰할 것

지연을 늘리고 세 번 연속 저장하면 요청들이 한 번의 쓰기를 함께 쓰므로 pending은 1에 머물고 세 결과가 함께 도착합니다.
쓰기 실패를 켜고 저장하면 dirty는 true로 남고 error에 원인이 표시됩니다.
저장소를 없애면 편집은 계속되고 저장만 STORAGE_UNAVAILABLE로 거부됩니다.

컨트롤러예제 코드에 포함되지 않습니다. 값은 props로 예제에 전달됩니다.

지연latency
쓰기 실패failWrites
저장소 사용 불가unavailable

<Example
  latency={700}
  failWrites={false}
  unavailable={false}
/>

예제를 준비하는 중…

실행 예제에는 JavaScript가 필요합니다. 아래 코드는 그대로 읽을 수 있습니다.

App.jsx

import { useEffect, useState } from 'react';
import { persistedRestate } from '@kkwaenggwari/restate';
import { flakyStorage, settings } from './storage.js';
import './styles.css';

const useNote = persistedRestate('', { key: 'lab-note', storage: flakyStorage });

export default function Example({ latency = 700, failWrites = false, unavailable = false }) {
  useEffect(() => {
    Object.assign(settings, { latency, failWrites, unavailable });
  }, [latency, failWrites, unavailable]);

  const note = useNote();
  const { dirty, operation, pending, error } = useNote.useStatus();
  const [results, setResults] = useState([]);

  const save = () =>
    useNote.save().then(
      (value) => setResults((list) => [`저장됨 ${JSON.stringify(value)}`, ...list]),
      (reason) => setResults((list) => [`실패: ${reason.code ?? reason.message}`, ...list]),
    );

  return (
    <main>
      <label>
        메모
        <input value={note} onChange={(event) => useNote.set(event.target.value)} />
      </label>
      <div className="actions">
        <button onClick={save}>저장</button>
        <button
          onClick={() => {
            save();
            save();
            save();
          }}
        >
          세 번 연속 저장
        </button>
      </div>
      <dl className="status">
        <dt>dirty</dt>
        <dd className={dirty ? 'warn' : 'ok'}>{String(dirty)}</dd>
        <dt>operation</dt>
        <dd>{operation ?? '-'}</dd>
        <dt>pending</dt>
        <dd>{pending}</dd>
        <dt>error</dt>
        <dd className={error ? 'bad' : ''}>{error ? (error.code ?? error.message) : '-'}</dd>
      </dl>
      <h2>결과</h2>
      <ol className="log">
        {results.length ? (
          results.map((result, index) => <li key={results.length - index}>{result}</li>)
        ) : (
          <li>-</li>
        )}
      </ol>
    </main>
  );
}

storage.js

// A storage adapter whose speed and failures you can change.
const records = new Map();
export const settings = { latency: 0, failWrites: false, unavailable: false };
const wait = () => new Promise((resolve) => setTimeout(resolve, settings.latency));

export const flakyStorage = {
  isAvailable: () => !settings.unavailable,
  async getItem(key) {
    await wait();
    return records.get(key) ?? null;
  },
  async setItem(key, value) {
    await wait();
    if (settings.failWrites) throw new Error('디스크가 가득 찼습니다');
    records.set(key, value);
  },
  async removeItem(key) {
    await wait();
    records.delete(key);
  },
};

안정성 설계

문서마다 독립된 상태

열린 문서마다 자기 상태가 필요하고, 문서를 닫으면 그 상태를 해제해야 합니다.

관찰할 것

문서 A와 B에 각각 입력하면 서로의 글이 섞이지 않습니다.
문서 A를 닫았다가 다시 열면 비어 있습니다. scope가 파괴되었기 때문입니다.

컨트롤러예제 코드에 포함되지 않습니다. 값은 props로 예제에 전달됩니다.

문서 수documents
문서 A 열기firstOpen

<Example
  documents={2}
  firstOpen={true}
/>

예제를 준비하는 중…

실행 예제에는 JavaScript가 필요합니다. 아래 코드는 그대로 읽을 수 있습니다.

App.jsx

import { restate, useRestateScope } from '@kkwaenggwari/restate';
import './styles.css';

function Document({ name }) {
  const useText = useRestateScope((scope) => restate('', { scope }));
  const text = useText();

  return (
    <section className="card">
      <span>{name}</span>
      <input
        value={text}
        placeholder="이 문서에만 입력됩니다"
        onChange={(event) => useText.set(event.target.value)}
      />
      <small>{`${text.length}자`}</small>
    </section>
  );
}

export default function Example({ documents = 2, firstOpen = true }) {
  const names = ['A', 'B', 'C'].slice(0, documents);

  return (
    <main>
      <div className="grid">
        {names.map((name, index) =>
          index === 0 && !firstOpen ? null : <Document key={name} name={`문서 ${name}`} />,
        )}
      </div>
    </main>
  );
}

컴포넌트가 소유하는 상태