Signals

• 리액트 생태계에서는 signals 사용불가할 듯!
  • 리액트 아키텍쳐는 컴포넌트 단위로 동작하여, 렌더링이 컴포넌트 단위로 동작해서!
• signals 은 상태를 사용하는 dom 노드 수준에서 직접 구독하고 업데이트를 함.
  • 따라서, 컴포넌트 전체를 리렌더링하는게 아니라, 실제 해당 값을 사용하는 dom 노드를 찾아 해당 부분만 업데이트 하는 컨셉임.
• signals 는 preact 와 같은 프레임웍에서 채택하여 사용중임.

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <h1>Count: {count}</h1>  // count가 변경되면
      <p>Other content</p>     // 이 부분도 함께 리렌더링
    </div>
  );
}


function Counter() {
  const count = signal(0);
  
  return (
    <div>
      <h1>Count: {count.value}</h1>  // count가 변경되면 이 부분만 업데이트
      <p>Other content</p>     // 변경되지 않음
    </div>
  );
}

어떻게 가능할까?

• 구독-발행 패턴 (당연히!)
• 세밀한 dom 업데이트
  • preact 는 signal 값을 사용하는 dom 노드에 직접 구독자 함수 연결
  • 값 변경 시, 해당 노드만 업데이트하는 fetch 함수 실행
  • virtual dom diffing 과정 생략 가능!
    • 원래는 v-dom diffing 으로 전체 돔에서 어느 부분이 변경되었는지 diffing 파악 해야하는 과정이 필요함.
    • 그런데, signal 사용 시, dom 노드 단위로 상태를 구독하고 업데이트하여 이 과정이 불필요해지는 것임.