Signals in React(IV): Separating UI Effects and Data Effects with Signals

Context

React와 Signal 기반 반응형 시스템을 함께 사용할 때 Effect 정리 전략이 명확하지 않으면 DOM 조작이 데이터 레이어에 섞이거나 반응형 의존성 추적이 제대로 작동하지 않는 문제가 발생한다. 개발자가 어느 레이어에서 어떤 Effect를 관리해야 하는지 판단하는 기준이 필요했다.

Technical Solution

• createEffect를 데이터 레이어 작업 전용으로 제한: Signal 읽기/쓰기, 리소스 할당 해제를 onCleanup으로 관리하며 React 커밋 타이밍과 독립적으로 실행
• useEffect를 UI/DOM 작업 전용으로 제한: React 상태/props 변경에 의존하고 cleanup이 React 커밋 주기를 따르도록 구조화
• useSignalValue 훅을 통한 Signal 읽기: React 컴포넌트에서 Signal 값을 스냅샷으로 가져와 의존성 배열에 추가 가능하게 함
• peek() 함수로 역 의존성 추적 방지: React 컴포넌트 자체가 반응형 그래프의 subscribers에 추가되지 않도록 구현
• 마이크로태스크 기반 자동 배칭: 동일 틱 내 여러 set() 호출을 단일 마이크로태스크로 병합해 불필요한 재평가 방지

Key Takeaway

React와 Signal을 함께 사용할 때는 데이터 흐름(Signal ↔ createEffect)과 UI 렌더링(State ↔ useEffect)을 명확히 분리해야 하며, 각 레이어의 정리(cleanup) 타이밍이 상충하지 않도록 책임 경계를 정의하는 것이 핵심 설계 원칙이다.