React와 Svelte는 같은 “UI 프레임워크”지만, 내부 동작과 철학은 완전히 다릅니다.

React는 런타임 중심(Virtual DOM, 함수 재실행), Svelte는 **컴파일러 중심(Fine-Grained Reactivity, direct DOM patch)**을 채택했습니다. 이 차이는 리렌더링, DOM 조작, 애니메이션 구현 방식에서 뚜렷하게 드러납니다.

1. 리렌더링 — React Hooks vs Svelte Fine-Grained Reactivity(FGR)

React: 함수 재실행 모델

React는 상태 변경 시 컴포넌트 전체를 함수로 다시 실행합니다.

이 과정에서 만들어진 Virtual DOM을 diff하여 실제 DOM에 반영합니다.

• useEffect: 사이드이펙트 관리 (deps 직접 지정)
• useMemo, useCallback: 메모이제이션으로 불필요한 계산 방지

// React 예시
function Counter() {
  const [count, setCount] = useState(0);
  
  const double = useMemo(() => count * 2, [count]);
  
  useEffect(() => {
    console.log("count changed", count);
  }, [count]);
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {double}
    </button>
  );
}

여기서 double 계산은 매번 재실행되지만 useMemo로 의존성을 직접 관리해야 합니다.

Svelte: FGR(변수 단위 반응성)

Svelte는 컴파일 타임에 의존성 그래프를 생성합니다.

값이 바뀌면, 해당 값을 참조하는 표현식과 DOM만 업데이트합니다.

<script>
  let count = 0;
  $: double = count * 2;  // 자동 의존성 추적
</script>

<button on:click={() => count++}>
  {double}
</button>

장점: deps 배열 필요 없음, 불필요한 재계산 없음 단점: 동적 구조보다는 정적 분석 가능한 코드에 최적화됨

Legend State / Signals