Style Gallery.
Design Engineering패턴실험적 가이드

원본에서 계산하는 상태

Derived State From Authoritative Inputs

Prevent totals, filtered lists, and dirty flags from drifting away from their inputs.

이 자료로 구현하기

원문 주소와 버전이 포함된 요청문입니다. 복사한 뒤 만들 화면과 요구사항을 채워 에이전트에게 전달하세요.

FROM PRINCIPLE TO PRACTICE

이 원리로 만든 예제 20

예제를 열어 직접 조작하고, 관찰한 동작을 이 문서의 원리와 비교해 보세요.

연결된 예제 17개 더 보기
원문 가이드 ENGLISH

Repository Boundary

Prevent totals, filtered lists, and dirty flags from drifting away from their inputs. This pattern belongs to Design Engineering and adds no Layout CSS or shared store implementation.

Reusable Method

Use when a value is a deterministic projection of current inputs. Store historical snapshots when the task explicitly needs what was true at a previous event; those are not redundant current projections.

State Model And Ownership

Only source items and filter are writable. Visible items and total are computed. Memoization is optional and must include every dependency; its lifetime cannot change meaning.

Transitions

Event and precondition Next state Effect or invariant
Items change New items Recompute projection from current inputs
Filter changes New filter Project without mutating items
No matching items Empty projection Total is zero, not a separate empty flag

Minimal Executable Example

Run this standalone JavaScript block with Node.js 22 or newer, or run all pattern examples from a repository checkout with bun run test:state-management. The assertions exercise the local model, not a browser or backend.

import assert from "node:assert/strict";
let items = [{ id: "a", price: 5 }, { id: "b", price: 12 }];
let minimum = 10;
const visible = () => items.filter(item => item.price >= minimum);
const total = () => visible().reduce((sum, item) => sum + item.price, 0);
assert.equal(total(), 12);
items = items.map(item => item.id === "b" ? { ...item, price: 7 } : item);
assert.deepEqual(visible(), []);
assert.equal(total(), 0);
minimum = 0;
assert.equal(total(), 12);

What Breaks If Removed

An independently updated total can miss a deletion, filter change, or remote refresh. A memo keyed only by items stays stale after changing the filter.

Composition And Substitution

Combine with ID selection; derive the selected object from the current collection. Keep submitted snapshots because they represent a past event.

Opinionated Guidance

Write down the projection before introducing another writable field. Define domain equality explicitly for dirty checks involving normalized dates, numbers, or nested data.

Platform-Specific Guidance

Framework memo and selector APIs have different invalidation rules. Verify dependency coverage and immutable update assumptions in the chosen adapter.

Unsupported Absolutes

Recomputing every projection is not always cheap; storing a cache can be valid if its invalidation contract is explicit.

Verification Contract

  • Change each dependency independently and inspect the projection.
  • Delete the final matching item and verify the empty result and zero total.
  • If memoized, repeat with unchanged references and changed filter inputs.

Record actual outcomes separately using the verification matrix.

Source, License, And Attribution

Locally authored synthesis and examples. No upstream implementation is copied. These experimental contracts describe consumer-owned behavior; review when a failure, ownership change, or platform change invalidates an assumption.

IA Navigation

Parent: State Management. Next: Continue the state management route.

Design Engineering 전체 ↗