1. 개요

FE 커뮤니티에는 늘 수상할정도로 스벨트를 열정적으로 사랑하는 개발자들이 있다.
(생각해보니 대부분은 이사람임)

다만 한국에서는 아직 스벨트로 프로덕트 레벨에서 의미 있는 성과가 크게 없어서 개인적으로는 크게 관심이 없었다.

그럼에도 불구하고 개발자로서 깊게 공부하다 보면, 프레임워크 자체보다 언어와 라이브러리의 동작 원리에 집중하게 된다.
이런 맥락에서 스벨트를 경험하면 오히려 리액트를 더 잘 이해하는 데 도움이 될 수 있다는 생각이 들어서 이 강연을 선택했다.

2. 강연 요약

발표자는 리액트와 스벨트를 비교하면서 얻은 인사이트를 공유했다.
주요 주제는 세 가지였다:

1. 리렌더링 방식 차이

   • 리액트: 상태 변경 시 해당 컴포넌트 전체가 재실행됨 → 자식까지 영향
     → 따라서 useEffect, useCallback, useMemo 같은 최적화 기법 필요
     → 참조 변경 여부를 기반으로 리렌더링 판단 (immutable 패턴 필수)

   • 스벨트: 사용된 부분만 업데이트(FGR, Fine-Grained Reactivity)
     → 값 사용 순간 의존성이 자동 등록되고, 상태 변경 시 관련 effect만 재실행
     → 동적 추적 시스템 기반 (observable, effect)
     → 불필요한 최적화 도구가 덜 필요

2. DOM 조작 패턴

   • 리액트: hook + 컴포넌트 패턴 기반, 모달/드롭다운 같은 DOM 조작은 비교적 복잡

   • 스벨트: use 디렉티브로 DOM 생명주기에 직접 연결 가능

   • React 19: 스벨트처럼 element 생성·소멸 시점 콜백을 받을 수 있게 개선됨
     → 점점 더 직관적인 DOM-로직 연결이 가능해짐

3. 애니메이션 구현

   • 리액트: 기본적으로 애니메이션이 불편 → framer-motion 같은 외부 라이브러리에 의존

   • 스벨트: transition 디렉티브로 간단히 구현 가능 (fade, slide, fly 등 내장)
     → 커스텀 트랜지션도 쉽게 작성 가능

   • React 19: ref 콜백을 통한 생성/소멸 시점 애니메이션 가능 → 스벨트와 접근성 유사해짐

3. 발표자의 메시지

• 리액트를 잘하는 것도 중요하지만, 다른 프레임워크 경험이 리액트를 더 잘 이해하는 지름길이 될 수 있다.

• 스벨트의 장점을 경험하면 “리액트에서 왜 이런 최적화 기법이 필요한가”를 더 명확하게 이해할 수 있다.

• 특히 FGR 개념, DOM 직관적 조작, 내장 애니메이션은 리액트에도 적용할 수 있는 시사점을 준다.

4. 개인적 인사이트

• 발표자의 의견처럼 리액트를 먼저 배우고, 이후 스벨트를 찍먹해 보는 것이 가장 합리적이라는 생각이 들었다. → 내 생각과 동일.

• 단, 발표에서는 스벨트의 장점 위주로만 언급했는데, 스벨트의 단점도 반드시 짚고 넘어갈 필요가 있다.

  • 생태계 규모가 작음 (라이브러리, 커뮤니티, 사례 부족)

  • 대규모 프로덕션 경험 부족

  • 한국 시장에서는 아직 레퍼런스 프로젝트가 거의 없음

---

결론

스벨트는 한국 프로덕트 레벨에서 실질적 성과는 부족하지만, 개발자 개인의 성장 관점에서는 매우 유익한 학습 도구다.
스벨트의 동작 원리를 학습하면 리액트의 최적화 방식, DOM 제어, 애니메이션 구현을 더 깊이 이해할 수 있다.
즉, “스벨트를 사랑하자. 하지만 리액트를 더 잘하기 위해서.”