chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,193 @@
+---
+id: wiki-2026-0508-concurrent-features
+title: Concurrent Features (React 18+)
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [React Concurrent Mode, useTransition, useDeferredValue]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.9
+verification_status: applied
+tags: [react, concurrent, performance, frontend]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: TypeScript
+  framework: React 19
+---
+
+# Concurrent Features (React 18+)
+
+## 매 한 줄
+> **"매 render 매 interruptible 하다"**. React 18 부터 매 concurrent renderer — `useTransition`, `useDeferredValue`, `Suspense`, automatic batching, streaming SSR 매 모두 매 high-priority update 가 low-priority 를 preempt 가능한 architecture 위에 build.
+
+## 매 핵심
+
+### 매 핵심 features
+- **Automatic batching**: promise / setTimeout / native event 모두 batch.
+- **`startTransition` / `useTransition`**: 매 non-urgent state update marking.
+- **`useDeferredValue`**: input 매 lag 없이 expensive list 매 deferred.
+- **`Suspense`**: data fetching boundary, fallback UI.
+- **Streaming SSR**: `renderToPipeableStream` (Node), `renderToReadableStream` (Edge).
+- **`useId`**: SSR-safe unique id.
+- **`use()` hook (React 19)**: unwrap promise/context inside render.
+
+### 매 priority levels
+1. Sync / urgent (user input).
+2. Default (most state updates).
+3. Transition (`startTransition`).
+4. Idle.
+
+### 매 응용
+1. 매 typeahead search — input snappy + results deferred.
+2. Tab switching — 매 stale UI keeps interactive.
+3. Streaming page render — 매 fastest paint then progressively fill.
+
+## 💻 패턴
+
+### useTransition for non-urgent updates
+```tsx
+import { useState, useTransition } from 'react';
+
+function Filter({ items }: { items: Item[] }) {
+  const [query, setQuery] = useState('');
+  const [filtered, setFiltered] = useState(items);
+  const [isPending, startTransition] = useTransition();
+
+  const onChange = (v: string) => {
+    setQuery(v); // urgent — input responds immediately
+    startTransition(() => {
+      setFiltered(items.filter((i) => i.name.includes(v))); // non-urgent
+    });
+  };
+
+  return (
+    <>
+      <input value={query} onChange={(e) => onChange(e.target.value)} />
+      {isPending && <Spinner />}
+      <List items={filtered} />
+    </>
+  );
+}
+```
+
+### useDeferredValue
+```tsx
+import { useState, useDeferredValue, memo } from 'react';
+
+function Search({ items }: { items: Item[] }) {
+  const [query, setQuery] = useState('');
+  const deferred = useDeferredValue(query);
+  return (
+    <>
+      <input value={query} onChange={(e) => setQuery(e.target.value)} />
+      <SlowList items={items} query={deferred} />
+    </>
+  );
+}
+
+const SlowList = memo(({ items, query }: { items: Item[]; query: string }) => {
+  return <ul>{items.filter((i) => i.name.includes(query)).map((i) => <li key={i.id}>{i.name}</li>)}</ul>;
+});
+```
+
+### Suspense boundary
+```tsx
+import { Suspense } from 'react';
+
+function App() {
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <UserProfile id={42} />
+      <Suspense fallback={<PostsSkeleton />}>
+        <Posts userId={42} />
+      </Suspense>
+    </Suspense>
+  );
+}
+```
+
+### use() hook (React 19)
+```tsx
+import { use, Suspense } from 'react';
+
+function Profile({ promise }: { promise: Promise<User> }) {
+  const user = use(promise); // 매 unwrap inside render
+  return <h1>{user.name}</h1>;
+}
+
+// caller
+<Suspense fallback={<Spinner />}>
+  <Profile promise={fetchUser(42)} />
+</Suspense>
+```
+
+### Streaming SSR (Node)
+```ts
+import { renderToPipeableStream } from 'react-dom/server';
+
+server.get('/', (req, res) => {
+  const { pipe } = renderToPipeableStream(<App />, {
+    bootstrapScripts: ['/main.js'],
+    onShellReady() { res.statusCode = 200; pipe(res); },
+    onError(err) { console.error(err); },
+  });
+});
+```
+
+### Automatic batching across async
+```tsx
+function handleClick() {
+  // React 18+: 매 둘 다 single render
+  setTimeout(() => {
+    setCount((c) => c + 1);
+    setFlag((f) => !f);
+  }, 0);
+}
+```
+
+### flushSync for opt-out
+```tsx
+import { flushSync } from 'react-dom';
+
+flushSync(() => setItems(next)); // 매 sync flush — DOM ready
+scrollToBottom(); // 매 새 item 매 already mounted
+```
+
+## 매 결정 기준
+| 상황 | Feature |
+|---|---|
+| Slow filter blocks input | `useTransition` or `useDeferredValue` |
+| Async data in component tree | `Suspense` + `use()` |
+| Need DOM after update | `flushSync` |
+| SSR slow first byte | streaming SSR |
+| Pre-React-18 codebase | upgrade first |
+
+**기본값**: input UI 매 lag → `useDeferredValue`. Bigger state cascade → `useTransition`.
+
+## 🔗 Graph
+- 부모: [[React]] · [[Performance]]
+- 변형: [[Suspense]] · [[Server-Components]] · [[Streaming-SSR]]
+- 응용: [[Remix]]
+- Adjacent: [[Code-Splitting]]
+
+## 🤖 LLM 활용
+**언제**: 매 input lag, expensive list, async-heavy tree, SSR perf.
+**언제 X**: 매 trivial UI, 매 add-only sync state.
+
+## ❌ 안티패턴
+- **`startTransition` for urgent input**: 매 input 매 still feel laggy.
+- **No `Suspense` boundary 위 `use()`**: 매 throws 매 above-tree fallback 까지 propagate.
+- **Mixing `flushSync` everywhere**: 매 defeats concurrent benefits.
+
+## 🧪 검증 / 중복
+- Verified (react.dev official docs).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — React 18/19 concurrent features + patterns |