스벨트를 통해 리액트 더 잘 이해하기

1. 컴파일 타임 vs 런타임 반응성

React는 런타임에 Virtual DOM을 비교해 DOM을 업데이트합니다. Svelte는 컴파일 타임에 어떤 변수가 변경되면 어떤 DOM이 바뀌는지를 미리 알아내 정확한 DOM 업데이트 코드를 생성합니다. 결과적으로 Svelte는 런타임 오버헤드가 없고 번들이 작지만, React는 런타임 유연성과 생태계가 강점입니다.

핵심 용어

2. Svelte 5 Runes와 React Hooks 비교

Svelte 5의 `$state`, `$derived`, `$effect`는 React의 useState, useMemo, useEffect와 개념적으로 대응됩니다. 그러나 Svelte Rune은 컴파일러가 처리하는 특수 신호로, 의존성 배열 없이도 자동으로 의존성을 추적합니다. React Hooks는 런타임에 호출 순서로 상태를 추적하므로 Hook 규칙(조건문 안 사용 불가)이 필요합니다.

핵심 용어

3. 단방향 vs 양방향 데이터 흐름

React는 단방향 데이터 흐름을 철학적으로 고수해 상태 변화를 예측 가능하게 만듭니다. Svelte는 `bind:` 디렉티브로 양방향 바인딩을 제공해 폼 처리가 간결하지만, 복잡한 앱에서 상태 흐름 추적이 어려울 수 있습니다. 두 접근의 트레이드오프를 이해하면 React의 설계 결정이 납득됩니다.

핵심 용어

Q1. React의 Virtual DOM이 Svelte 방식보다 나은 점이 있다면 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "React의 Virtual DOM이 Svelte 방식보다 나은 점이 있다면 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] Virtual DOM의 장점: 선언적 UI로 개발자가 '어떻게 바꾸는가'가 아닌 '어떻게 보여야 하는가'만 선언. 런타임 유연성 — 동적으로 생성되는 컴포넌트나 조건에 따라 구조가 크게 달라지는 경우에 강함. 생태계와 도구(DevTools, 라이브러리). Svelte의 컴파일 방식은 정적 분석이 가능한 경우에 최적이지만 동적 패턴에서는 한계가 있습니다.

Q2. Svelte를 배우면 React를 더 잘 이해할 수 있다는 주장에 동의하시나요?

힌트

[감점 답변] 정의만 반복하거나 "Svelte를 배우면 React를 더 잘 이해할 수 있다는 주장에 동의하시나요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 동의한다면: 다른 프레임워크를 보면 React가 선택한 트레이드오프가 보입니다. Virtual DOM이 '항상 빠른 것'이 아니라 '개발 편의성을 위한 선택'임을 알 수 있습니다. Hook 규칙이 왜 필요한지(런타임 호출 순서 추적) 이해됩니다. 하나의 도구만 파면 그 도구의 결정들이 당연해 보이지만 비교를 통해 설계 의도가 드러납니다.

Q3. React Hook의 의존성 배열이 필요한 이유를 Svelte와 비교해 설명해주세요.

힌트

[감점 답변] 정의만 반복하거나 "React Hook의 의존성 배열이 필요한 이유를 Svelte와 비교해 설명해주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] React는 런타임에 Hook 호출 순서로 상태를 관리해 컴파일 타임에 의존성을 알 수 없습니다. 그래서 개발자가 직접 `[dep1, dep2]`를 선언해야 합니다. Svelte Rune($effect)은 컴파일러가 코드를 분석해 어떤 $state를 참조하는지 빌드 타임에 파악하므로 의존성 배열이 필요 없습니다. 이는 컴파일 타임 vs 런타임 접근의 근본적 차이에서 비롯됩니다.