State Projections (Signals)

1. Overview

상태 투사 및 시그널 역학(State Projections & Signals Physics)은 중앙에 뭉쳐 있는 거대한 상태(State) 데이터가 변경될 때마다 화면 전체가 요동치며 리렌더링되는 폭포(Waterfall) 현상을 찢어발기고, 오직 데이터가 꽂혀 있는 말단의 UI 태그 하나만 핀셋처럼 정밀 타격하여 0.1초 만에 업데이트하는 반응성(Reactivity) 통제 물리를 다룹니다.

Redux나 Context API 기반의 전통적 상태 트리는 최상단 저장소(Store)의 변수 하나만 바뀌어도, 구독하고 있는 수백 개의 하위 컴포넌트 가상 DOM(V-DOM) 트리를 무자비하게 비교(Diffing)하느라 CPU 낭비를 유발합니다. 학습자는 상태를 컴포넌트 외부에 떠다니는 구름(Atom/Signal)으로 분리하는 Zustand, Recoil의 파생(Derived) 역학과, 가상 DOM 비교마저 건너뛰고 값의 변화(Signal)를 돔(DOM) 텍스트 노드에 물리적으로 직결시키는 SolidJS, Preact Signals의 극단적(Fine-grained) 타겟 렌더링 엔진을 체화합니다.

2. Scope & Boundaries

In-Scope

Global State Management: Redux(단방향 데이터 흐름), Context API 렌더링 붕괴(Provider Hell).
Atomic & Proxy State: Recoil/Jotai (파편화된 원자 상태), Zustand/Valtio (Proxy 및 외부 스토어).
Reactivity & Signals: Signals 패턴, Fine-grained Reactivity, 파생 상태(Computed/Derived).
렌더링 바이패스(Bypass): V-DOM Diffing을 생략하고 실제 DOM을 직접 투사(Projection) 타격하는 물리적 패러다임.

Out-of-Scope

Virtual DOM 트리 비교 알고리즘: 컴포넌트 트리 내부의 Diffing 휴리스틱 $ightarrow$ 14-02-01. Virtual DOM Reconciliation 영역으로 위임.
백엔드 DB 트랜잭션 상태 관리: 브라우저 밖 서버 측면의 롤백 및 격리성 $ightarrow$ 04-03. Data Consistency & Isolation 영역으로 위임.

Boundaries

Virtual DOM vs Signals (14-02-01 vs 14-02-03): V-DOM(14-02-01) 체제가 데이터가 변하면 "화면 전체를 다시 그려서(메모리) 바뀐 곳만 찾자"는 투망식 무식한 검색(Top-down) 방어선이라면, Signals(14-02-03) 체제는 "변수 x가 저 버튼 안에 있는 텍스트 노드에 연결되어 있다"는 구독(Subscription) 선을 미리 그어두고 그 버튼만 저격하는 핀포인트 렌더링 차별점입니다.

3. Counterexample

Context API 지옥 (Provider Hell Fallacy): 다크 모드 토글 하나 만들겠다고 React의 Context API에 거대한 유저 정보와 UI 설정을 욱여넣고 최상단 <App>을 감싸는 무지. 다크 모드 버튼을 누르는 순간, 최상단 Provider 값이 바뀌며 이 컨텍스트를 구독하는 전혀 상관없는 하위 장바구니 리스트까지 수천 개의 컴포넌트가 일제히 리렌더링 폭풍(Re-render Storm)에 휘말립니다. Context API는 상태 관리가 아니라 상태 주입기(Dependency Injection)일 뿐입니다.
보일러플레이트 중독 (Boilerplate Fetish Fallacy): 버튼 클릭 카운터 하나를 만들기 위해 Redux의 Action 타입, Action 생성자, Reducer, Dispatch 함수까지 파일 4개를 쪼개며 거대한 통제망(Flux)을 구축하는 오버엔지니어링. 거대 금융 앱에서는 중앙 추적(Time-travel Debugging)이 의미가 있지만, 일반 웹에선 배보다 배꼽(보일러플레이트)이 큽니다. 스토어 상태를 외부(Store)로 빼고 훅(Hook)으로 빨아들여 구독하는 Zustand 같은 구독/선택자(Selector) 역학으로 압축해야 합니다.

4. Prerequisites

가상 DOM 디핑 휴리스틱 (Basic): 리액트가 렌더링할 때 자식 트리를 무자비하게 다시 그리는(Diffing) 구조를 알아야 불필요한 렌더링의 공포를 느낄 수 있습니다. (14-02-01. Virtual DOM Reconciliation)
자바스크립트 프록시와 클로저 (Recommended): JS의 Proxy 객체나 getter/setter 원리를 알아야 Signal과 Valtio가 변수 변화를 낚아채는(Intercept) 마법을 이해합니다. (14-01-01. JS Runtime & V8 Engine)

5. Learning Map

Sequence	Core Cluster	Objective & Description	Evidence (BoK)
1	The Context & Redux Trap	최상단 부모 상태를 바꿨을 뿐인데 앱 전체가 느려지는 폭포수 렌더링 병목(Top-down 붕괴)의 원리를 해부합니다.	Primary
2	Atomic & Proxy Stores	거대한 상태 저장소를 모래알(Atom)로 쪼개거나 투명 망토(Proxy)를 씌워, 바뀐 변수 하나만 컴포넌트에 통과(Zustand/Recoil)시킵니다.	Industry
3	Derived Projections	원본 데이터 1개를 바꾸면 이를 구독하는 파생(Computed) 데이터 10개가 톱니바퀴처럼 연쇄 반응하며 자동 계산되는 렌더 파이프라인을 짭니다.	Primary
4	Signals & Fine-grained	아예 컴포넌트(V-DOM) 렌더링 자체를 건너뛰고, 변수 값만 브라우저 DOM 텍스트 노드에 물리적으로 직접 꽂아버리는 시그널(SolidJS)을 익힙니다.	Industry

6. Learning Topics

Basic

Core Topic 01: Top-down 렌더링 폭포와 Context/Redux의 한계

Why to Learn: 1,000줄짜리 게시판에서 좋아요 하트 버튼 하나를 눌렀는데 게시판 전체가 깜빡거리며 앱이 멈추는 리렌더링 병목(Re-render Waterfall)을 막기 위함입니다.
What to Learn: React Context API, Prop Drilling, Redux(Flux Pattern), Top-down Rendering, Re-render Storm.
How to Learn: Context API는 값이 바뀌면 구독 중인 모든 하위 컴포넌트의 가상 DOM 스위치를 올려(Dirty Mark) 무차별 연산을 강요하지만, Redux는 Selector(선택자)를 통해 내가 원하는 값(예: state.cart.length)이 바뀔 때만 리렌더링을 허락하는 물리적 커팅(Cutting) 차이를 차트로 시각화합니다.
Implement: React DevTools Profiler를 켜고, Context API로 전역 테마(다크 모드)를 구현했을 때 토글 버튼을 누르면 100개의 더미 컴포넌트가 전부 붉게 타오르며(렌더링) 성능이 곤두박질치는 최악의 아키텍처 재현.

Core Topic 02: 외부 스토어 구독(Zustand)과 원자 상태(Atom)

Why to Learn: 리액트 컴포넌트 트리 내부에 무겁게 묶여있던 상태(State)를 끄집어내어, 클라우드 구름처럼 컴포넌트 밖에 띄워놓고 핀셋으로 빨아들이기 위해서입니다.
What to Learn: Zustand (External Store), Recoil/Jotai (Atom), Proxy 기반 반응성(Valtio), useSyncExternalStore.
How to Learn: Redux의 무거운 보일러플레이트를 버리고, Zustand가 리액트 컴포넌트 바깥(메모리)에 클로저(Closure) 변수를 띄운 뒤, 값이 바뀌면 리액트의 forceUpdate를 찔러 컴포넌트를 강제 갱신시키는 구독(Subscription) 다이렉트 통신망을 뜯어봅니다.
Implement: Redux로 짠 50줄짜리 Action/Reducer 보일러플레이트 코드를, Zustand 스토어로 단 10줄 만에 리팩토링하고 컴포넌트에서 특정 프로퍼티(state.bears)만 Selector로 구독해 V-DOM 디핑 범위를 극도로 좁히는 방어 코드 작성.

Why to Learn: 장바구니 아이템 배열 원본만 바꾸면 총액, 개수, 할인율이 자동으로 물 흐르듯 계산(투사)되게 하여 더티 버그(상태 엇갈림)를 파괴하기 위함입니다.
What to Learn: Derived State, Computed Properties (Recoil Selector / Vue Computed), Memoization 꼬임 방어.
How to Learn: 리액트 컴포넌트 안에서 useEffect로 A값이 바뀌면 B값을 업데이트하는 더러운 상태 동기화(Sync) 땜질을 금지하고, 원자(Atom) A와 B를 조합해 파생된 C(Selector) 공간을 통과하면 자동으로 캐시(Cache)된 화면이 도출되는 단방향 톱니바퀴 연쇄 물리 모델을 설계합니다.
Implement: 원본 배열 상태(Atom) 하나와 검색어 텍스트 상태(Atom) 두 개를 조합(Derived Selector)하여, 검색 결과 리스트 뷰 컴포넌트는 오직 이 파생 상태만을 구독하여 렌더링되게 묶어내는 의존성 그래프(Dependency Graph) 구축.

Core Topic 04: 시그널(Signals)과 미시적 반응성(Fine-grained Reactivity)

Why to Learn: 리액트의 근간인 가상 DOM(V-DOM)마저도 '화면을 비교하는 쓰레기 연산'으로 규정하고, 변수 변화가 브라우저 DOM을 즉각(0ms) 직격하게 만들기 위해서입니다.
What to Learn: Signals (SolidJS, Preact), Fine-grained Reactivity, Getter/Setter Tracking, V-DOM Bypass.
How to Learn: 리액트는 변수 count가 바뀌면 컴포넌트 함수 전체를 다시 실행(Re-run)하지만, 시그널(Signals) 패턴은 함수는 단 한 번만 실행하고 count 값을 구독(Tracking)하는 텍스트 노드 <p>{count()}</p>의 DOM 주소만 기억해뒀다 값이 바뀌면 DOM 요소만 정확히 교체하는 미시적(Fine-grained) 타격 물리학을 분해합니다.
Implement: 리액트(V-DOM)와 SolidJS(Signals)로 각각 10,000개의 타이머가 도는 리스트를 렌더링 시뮬레이션하고, V-DOM 엔진은 10,000개를 비교하느라 프레임(FPS)이 주저앉는 반면, Signals는 텍스트 노드 주소만 건드려 CPU 0%에 근접하는 압도적 물리적 한계점 돌파 검증.

7. Terminology

Term (EN / ko, abbr)	1문장 정의	단계(기본/권장/실무/심화)	역할/맥락	관련 개념	유사/대비/함께 사용	오해 포인트	Evidence(Primary/Secondary/Industry)	Flags(core)
State Management	컴포넌트 이곳저곳에 흩어진 데이터(유저 정보, 장바구니)를 한데 모아 전역 클라우드처럼 공유하고 제어하는 데이터 물류 창고입니다.	기본	전역 상태	Redux, Zustand	vs. Local State (useState)	전역 상태 라이브러리를 쓰면 무조건 앱이 빨라질 거라는 무지	Primary	core
Prop Drilling	최상위 할아버지 컴포넌트가 손자 컴포넌트에게 데이터를 넘겨주기 위해, 중간에 있는 아빠/엄마 컴포넌트에 억지로 짐을 지워 통과시키는 막노동입니다.	권장	의존성 지옥	Context API	vs. Global Store	중간에 거치는 컴포넌트들은 렌더링되지 않을 거라는 가상 DOM의 착각	Industry Docs	core
Atom (원자 상태)	거대한 중앙 통제식 데이터 창고(Redux)를 버리고, 화면 여기저기에 흩뿌려놓을 수 있는 독립적이고 아주 작은 데이터 알갱이입니다.	실무	상태 파편화	Recoil, Jotai	vs. Single Store (Redux)	Atom이 늘어나면 관리가 불가능해져서 결국 거대 스토어가 낫다는 회귀적 오해	Industry OpenSource	core
Signals (시그널)	리액트처럼 멍청하게 가상 DOM 전체를 다시 그리지 않고, 오직 데이터가 들어있는 브라우저 태그 한 줄(DOM)만 레이저로 타격해 업데이트하는 반응성 기술입니다.	심화	초정밀 렌더링	SolidJS, Preact	vs. Virtual DOM	리액트의 `useState`와 이름만 다르고 속도도 똑같을 것이라는 치명적 오류	Industry	core

8. References

Primary References

[CS2023: Software Engineering / HCI] — 반응형(Reactive) 프로그래밍 패러다임, 데이터-뷰 분리(MVC/Flux) 패턴 및 데이터 바인딩 지연 최적화.
[SWEBOK v3: Software Design] — 의존성 주입(Dependency Injection) 및 Observer/Pub-Sub 패턴 기반의 소프트웨어 결합도(Coupling) 완화.

Secondary References

[SolidJS Documentation / Ryan Carniato Articles] — 가상 DOM 오버헤드 제거, 런타임 종속성 추적(Dependency Tracking) 및 클로저(Closure) 기반의 미시적 반응성(Fine-grained Reactivity).
[Zustand / Jotai GitHub Architecture] — React의 useSyncExternalStore 훅을 활용한 Tearing(화면 찢김) 방어 및 V-DOM 컴포넌트 외부 클로저(External Store) 메모리 매핑.

Industry References

[Dan Abramov: You Might Not Need Redux] — 전역 상태 관리 남용에 따른 보일러플레이트 부채 증가 및 컴포넌트 지역 상태(Local State) 캡슐화 원칙.
[Recoil Documentation (Meta)] — 상태 트리(Atom)와 순수 함수 기반 파생 상태(Selector) 파이프라인의 Directed Acyclic Graph(DAG) 흐름 제어.

9. Final Checklist

Primary Checklist

깊이가 10단계인 컴포넌트 트리에서 부모가 자식에게 Props를 끝없이 넘겨주는 프롭 드릴링(Prop Drilling) 지옥을, 전역 상태 라이브러리(Zustand 등)를 통해 핀셋(Selector)으로 해결했는가?
Context API로 최상단에 유저 정보를 감쌌을 때, 유저 이름이 바뀌면 이 값을 구독하지 않는 수많은 하위 컴포넌트까지 무차별로 리렌더링되는 폭포(Waterfall) 현상을 시각적으로 인지하고 있는가?

Secondary Checklist

Redux와 같은 단일 스토어(Single Store)의 무거운 보일러플레이트 코드와, Recoil/Jotai 같은 파편화된 원자(Atom) 기반 상태 모델 간의 데이터 흐름(Flux vs DAG) 아키텍처 차이를 설명할 수 있는가?
여러 개의 원본 데이터(장바구니 아이템들)가 변할 때, 컴포넌트 내부에서 useEffect로 수동 연산(동기화)하지 않고 파생 상태(Derived / Selector) 파이프라인을 뚫어 자동 캐싱되도록 아키텍처를 방어했는가?

Industry Checklist

React 18의 동시성 렌더링(Concurrent Rendering) 환경에서 외부 스토어(External Store) 상태가 변경될 때, 화면의 일부는 구버전 데이터를, 일부는 신버전 데이터를 그리는 화면 찢김(Tearing) 현상을 useSyncExternalStore로 봉쇄했는가?
React의 가상 DOM 디핑(Diffing) 기반 재조정 렌더링마저도 CPU 낭비라 판단될 경우, SolidJS나 Preact Signals의 Fine-grained Reactivity를 도입하여 컴포넌트 함수 재실행 없이 실제 DOM(TextNode)만 업데이트하는 극한의 튜닝을 검토했는가?