Solid.js는 React와 같은 프레임워크와는 다르게, re-rendering이라는 개념이 전통적인 의미로는 존재하지 않습니다. Solid.js는 반응형 프로그래밍 기반으로 작동하며, 이는 컴포넌트가 자동으로 관찰되고 필요한 경우에만 업데이트되는 원리를 사용합니다. Solid.js에서는 컴포넌트의 상태가 변경될 때마다 전체 함수를 재호출하지 않습니다. 대신, 변경된 상태에만 영향을 받는 DOM 노드를 최적화된 방식으로 직접 업데이트합니다. 이를 위해 Solid.js는 fine-grained reactivity라는 개념을 사용합니다. 컴포넌트 내에서 사용되는 상태 변수는 createSignal, createEffect, createMemo 등의 API를 통해 관리됩니다. 이를 사용하면 Solid.js는 상태 변수의 변경사항을 구독하고, 변경사항이 발생할 때만 관련된 DOM 노드를 업데이트합니다. 이 과정에서 함수 전체를 재호출할 필요가 없습니다. 예를 들어, 아래 예시를 살펴봅시다. import { createSignal, onCleanup } from "solid-js"; function Counter() { const [count, setCount] = createSignal(0); const increment = () => setCount(count() + 1); return ( <> <div>Count: {count()}</div> <button onClick={increment}>Increment</button> </> ); } ​ 여기서 count는 상태 변수로, createSignal을 사용하여 생성되었습니다. count가 변경될 때, Solid.js는 이를 자동으로 감지하여 해당 DOM 노드만 업데이트합니다. 이렇게 하면 전체 함수를 재호출하지 않고도 필요한 부분만 업데이트할 수 있습니다. ​ ​ Q . 위의 예제에서 button은 re-rendering되지 않는가? 어떻게 그것이 가능한가? 위 예제에서 버튼은 상태 변경에 따라서 실제로 다시 렌더링되지 않습니다. Solid.js는 fine-grained reactivity를 사용하여 DOM 노드를 직접 업데이트하는 방식으로 최적화되어 있습니다. count 상태 변수의 변경은 <div>Count: {count()}</div> 라인에서만 관찰되므로, 버튼에는 영향을 주지 않습니다. Solid.js는 컴포넌트를 처음 렌더링할 때 관찰 가능한 값들에 대한 의존성 그래프를 구축합니다. 이후에 상태가 변경될 때, 변경된 상태에 의존하는 DOM 노드만 업데이트합니다. 이 경우, count 상태 변수가 변경되어도 버튼에는 영향을 주지 않으므로, 버튼은 다시 렌더링되지 않습니다. 이렇게 Solid.js는 필요한 부분만 업데이트하므로 성능이 향상되고 불필요한 렌더링을 방지합니다. 이 최적화 방식 덕분에 Solid.js는 React와 같은 전통적인 리액티브 프레임워크에 비해 더 빠른 성능을 보여줍니다.