지금 스벨트(Svelte)를 배워야 하는 이유

당신은 프론트엔드 개발자인가요, 리액트엔드 개발자인가요?

"리액트 경험 3년 이상", "리액트 네이티브 개발자 구함", "리액트 훅 마스터 클래스"... 요즘 프론트엔드 채용공고와 교육과정을 보면, 프론트엔드 개발과 리액트 개발이 거의 동의어처럼 사용되고 있습니다. 그런데 한번 생각해 볼게요. useMemo를 언제 써야 할지, React.memo로 어떻게 리렌더링을 최적화할지, useCallback의 의존성 배열은 어떻게 관리해야 할지 등 이런 것들을 잘 안다고 해서 정말 "잘하는 프론트엔드 개발자"일까요?

돌이켜 보면 10년 전에는 제이쿼리가 웹 개발의 표준이었습니다. "제이쿼리를 모르면 프론트엔드 개발자가 아니다"라는 인식이 있었죠. 하지만 리액트가 나타나면서 패러다임이 변했고, 제이쿼리만 고집하던 개발자들은 새로운 기술에 적응하지 못했습니다. 역사는 반복됩니다. 오늘의 리액트는 내일의 제이쿼리가 될 수도 있습니다.

프론트엔드 역량을 키우는 다양한 접근법

많은 개발자들이 Feature-Sliced Design(FSD)와 같은 아키텍처 패턴이나, 최적의 폴더 구조를 고민합니다. 이는 커리어와 기술 역량을 증진시키기 위한 노력이지만, 조금만 눈을 돌리면 더 근본적인 기회가 있습니다.

Preact는 왜 React와 다른 접근법을 선택했을까요? SolidJS는 어떤 원리로 동작하나요? Astro의 아일랜드 아키텍처는 React의 서버 컴포넌트와 어떻게 다를까요? 그리고 요즘 많은 프레임워크가 채택하고 있는 '시그널 패턴'은 무엇일까요?

시그널 패턴을 예로 들어보겠습니다. Vue, Solid, Svelte 등 리액트를 제외한 거의 모든 현대 프레임워크들이 이 패턴을 채택했습니다. 이 패턴은 상태 변화를 정확히 추적하고 필요한 부분만 업데이트하여, 불필요한 리렌더링을 제거합니다. 리액트에서 useMemo, useCallback, React.memo를 사용해, 고군분투하는 최적화 작업이 다른 프레임워크에서는 기본적으로 해결되는 문제인 것이죠.

기술의 세계에서는 후발주자 프레임워크들이 기술적으로, 개발자 경험(DX)적으로 더 뛰어날 확률이 높습니다. 그들은 선행 기술의 불만족에서 시작했기 때문입니다. 10년 전 "제이쿼리만 해도 됩니다"라고 말했던 개발자들이 오늘날 어디에 있을까요? 10년 후 "저는 리액트만 합니다"라고 말하는 개발자는 어떻게 될까요?

그래서 이 기회에 스벨트(Svelte)를 배우면 좋은 이유

다양한 프레임워크 경험은 단순히 기술 스택을 넓히는 것 이상의 가치가 있습니다. 다른 접근법을 탐구하는 과정에서 프론트엔드 개발의 본질적 문제들을 더 깊이 이해하게 되고, 이는 여러분이 주로 사용하는 리액트에서도 더 나은 해결책을 찾는 통찰력을 제공합니다.

이런 맥락에서 스벨트는 특별한 위치에 있습니다. 이 글에서는 스벨트가 제시하는 세 가지 핵심 장점을 살펴보겠습니다.

• 시그널 패턴을 선택한 이유: 불필요한 리렌더링 없이 정확한 DOM 업데이트를 가능하게 하는 스벨트의 반응성 시스템
• 보일러플레이트를 없애는 문법: 객체의 직접 변경이 가능한 자연스러운 코드 작성 방식
• 올인원 프레임워크로서의 매력: 추가 라이브러리 없이도 애니메이션, 상태 관리, 스타일링을 해결하는 통합 경험

스벨트는 단순히 또 하나의 프레임워크를 넘어, 프론트엔드 개발에 대한 새로운 관점을 제공합니다. 지금부터 스벨트의 세계로 함께 들어가 보겠습니다.

현대 웹 프레임워크는 시그널이 대세

리액트를 사용하다 보면 성능 최적화에 관한 수많은 고민에 직면합니다. 불필요한 리렌더링을 막기 위해 ‘React.memo’를 써야 할까? ‘useMemo’와 ‘useCallback’은 언제 필요할까? 상태 업데이트 로직을 어떻게 최적화해야 할까? 이런 고민이 익숙하신가요?

리렌더링을 막는 기술을 익히는 것이 과연 프론트엔드 개발자로서의 핵심 역량일까요? 애초에 다른 프레임워크에서는 이런 문제 자체가 존재하지 않을 수도 있습니다. 바로 시그널 패턴 때문입니다.

시그널 패턴이란 무엇인가?

시그널 패턴은 상태 변화를 미세한 단위로 추적하고 필요한 부분만 업데이트하는 반응형 프로그래밍 기법입니다. 간단히 말해 시그널은 특정 값을 감싸고 있는 컨테이너로서, 그 값이 변경되면 그 값을 사용하고 있는 소비자(컴포넌트나 계산식 등)에게만 변경을 알립니다. 

시그널의 핵심은 세밀한 반응성(fine-grained reactivity)입니다. 이는 프레임워크가 값이 어디서 어떻게 사용되고 있는지 세밀하게 추적하여, 관련된 UI 부분만 "핀포인트" 업데이트할 수 있게 합니다. 부모 컴포넌트의 상태가 변경되더라도 자식 컴포넌트는 해당 상태를 직접 사용하지 않는 한 전혀 영향을 받지 않는 것이죠. 이는 리액트의 리렌더링 접근 방식과는 근본적으로 다른 패러다임입니다.

현대 프레임워크들의 시그널 도입 현황

최근 프론트엔드 세계에서는 '시그널(Signal)' 패턴이 대세로 자리 잡고 있습니다. 리액트를 제외한 거의 모든 현대 프레임워크들이 이 패턴을 채택했습니다. 각 프레임워크에서 시그널 패턴이 어떻게 구현되어 있는지 살펴보겠습니다.

Vue 3

Composition API의 `ref`와 `reactive` 함수를 통해 시그널 개념을 구현했습니다. Vue 3는 JavaScript의 `Proxy`를 활용하여 일반 객체를 감싸 reactive proxy로 만들고, 접근된 속성만 추적합니다. 이를 통해 템플릿이나 컴포지션 함수 내에서 실제로 사용된 데이터만 반응형으로 등록되며, 그 데이터가 변경될 때만 해당 UI를 업데이트합니다.

SolidJS

SolidJS는 프레임워크 자체가 시그널을 메인 컨셉으로 선택한 대표적인 사례입니다. SolidJS에서 상태를 만들 때는 `createSignal` 함수를 사용하며, 이 함수는 getter와 setter 한 쌍을 반환합니다.

const [count, setCount] = createSignal(0);

SolidJS의 핵심은 컴포넌트 함수가 단 한 번만 실행된다는 점입니다. 이후에는 시그널값이 변경될 때 연결된 부분만 즉시 갱신됩니다. 컴포넌트 전체가 아닌 실제로 변경된 부분만 업데이트되므로 놀라운 성능을 보여줍니다.

Preact

경량 React 대안으로 유명한 Preact도 `@preact/signals` 패키지를 통해 시그널 개념을 도입했습니다. Preact에서 시그널은 `.value` 프로퍼티로 관리됩니다.

import { signal } from "@preact/signals";
const count = signal(0);
// 읽기: count.value
// 쓰기: count.value = 1;

Preact 팀은 시그널 도입으로 "상태 업데이트 비용이 컴포넌트 수에 상관없이 항상 빠르게 유지된다"라고 강조합니다.

Angular

Angular도 최신 버전(v16 이상)에서 시그널이라는 새로운 반응형 프리미티브를 도입했습니다.

const count = signal(0);
// 읽기: count()
// 쓰기: count.set(1) 또는 count.update(v => v + 1)

Angular의 시그널은 함수처럼 호출하여 값을 읽을 수 있고, 다른 시그널에서 파생된 계산된 값(`computed`)을 만들거나 부작용(`effect`)을 등록할 수도 있습니다.

Svelte

Svelte는 컴파일러로 시그널 패턴의 보일러플레이트를 줄여줍니다. 그래서 유저는 보다 직관적인 코드를 작성할 수 있습니다.

<script>
  // Svelte 5의 $state rune
  let count = $state(0);
  
  function increment() {
    // 직접 mutation이 가능합니다
    count++;
    // 또는
    count = count + 1;
  }
  
  function reset() {
    // 값 할당도 간단합니다
    count = 0;
  }
</script>

<h1>카운터: {count}</h1>
<button onclick={increment}>증가</button>
<button onclick={reset}>리셋</button>

이 코드에서 `count` 변수는 `$state` rune으로 선언되어 반응형 상태가 됩니다. `count++`나 `count = 0`과 같은 직접적인 변이가 가능하며, 해당 값이 변경되면 이를 사용하는 UI 부분(여기서는 `{count}`가 표시되는 부분)만 자동으로 업데이트됩니다.

Qwik

Qwik에서는 `useSignal` 훅을 통해 시그널을 생성합니다.

const count = useSignal(0);
// 읽기: count.value
// 쓰기: count.value = 1

리액트 vs 시그널 기반 프레임워크

React의 리렌더링 중심 상태 관리

React는 컴포넌트 단위의 재렌더링을 기본 원칙으로 삼습니다. `useState`나 `this.setState`로 상태를 업데이트하면 React는 해당 컴포넌트 함수(또는 클래스 컴포넌트의 render 메서드)를 다시 호출하고, 자식 컴포넌트들을 모두 재귀적으로 다시 렌더링합니다.

이렇게 생성된 새로운 가상 DOM을 React는 이전 가상 DOM과 비교(VDOM diff)하여 실제 변경된 부분만 실제 DOM에 반영합니다. 따라서 React의 철학은 "모든 것을 다시 계산하되, 실제 DOM 조작은 최소화"라고 요약할 수 있습니다.

예를 들어, 아래와 같은 코드를 생각해 볼게요.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

setCount가 호출되면 Counter 컴포넌트 함수 전체가 다시 실행되고, 가상 DOM을 새로 생성한 후 이전과 비교합니다.

시그널 기반 세밀한 반응성

반면, 시그널 기반 프레임워크(예: SolidJS)는 다음과 같이 동작합니다.

function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
      <p>카운트: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>증가</button>
    </div>
  );
}

중요한 차이점:

1. 컴포넌트 함수는 초기에 한 번만 실행되고, 이후에는 다시 실행되지 않습니다.

2. `count` 시그널값이 변경되면, `{count()}` 부분만 업데이트됩니다. 컴포넌트 전체나 버튼은 다시 계산되지 않습니다.

3. 가상 DOM 비교 과정 없이 실제 DOM의 필요한 부분만 직접 업데이트합니다.

시그널이 주목받는 이유

시그널 패턴이 주목받는 이유는 다음과 같습니다.

1. 정확한 UI 업데이트: 변경된 상태에 직접 의존하는 UI 부분만 정확하게 업데이트됩니다. 1만 개의 항목이 있는 리스트에서 하나의 항목만 업데이트할 때, 리액트는 전체 리스트를 다시 렌더링하지만, 시그널 기반 프레임워크는 해당 항목만 정확히 업데이트합니다.

2. 보일러플레이트 코드 감소: 불변성 유지를 위한 복잡한 코드가 필요 없습니다. 일반적인 자바스크립트 코드처럼 직접 객체를 수정할 수 있습니다.

3. 예측 가능한 반응성: 상태 변화와 UI 업데이트 사이의 관계가 명확하고 직관적입니다.

4. 메모리 효율성: 가상 DOM을 사용하지 않거나, 최소화하여 메모리 사용량을 줄일 수 있습니다.

5. 자동 최적화: 개발자가 명시적인 최적화(메모이제이션 등)를 적용하지 않아도 프레임워크가 자동으로 최적화합니다. 리렌더링을 막기 위한 기법을 고민할 필요가 없습니다.

리액트는 다른 길을 가는 중

흥미로운 점은 리액트 팀도 성능 최적화의 중요성을 인식하고 있지만, 시그널 패턴과는 다른 접근 방식을 취하고 있다는 것입니다. 리액트 코어 팀의 앤드류 클라크(Andrew Clark)는 "시그널과 같은 기본 요소를 리액트에 추가할 수 있지만, 이것이 UI 코드를 작성하는 좋은 방법이라고 생각하지는 않는다. 성능 면에서는 뛰어나지만, 나는 매번 전체가 다시 생성된다고 가정하는 리액트의 모델을 선호한다. 우리의 계획은 컴파일러를 사용하여 비슷한 성능을 달성하는 것이다."라고 언급했습니다.

리액트는 'React Forget'이라는 컴파일러를 통해 자동으로 `useCallback`, `useMemo` 등을 적용하고, 서버 컴포넌트를 통해 리렌더링이 필요한 컴포넌트를 최소화하는 방식으로 최적화를 추구하고 있습니다. 그러나 이런 접근 방식은 오랫동안 개발 중이지만, 아직 실무에서 완전히 활용하기 어려운 상태입니다.

리액트의 방식은 함수형 컴포넌트의 리렌더링을 최적화하는 데 초점을 맞추고 있지만, 결국 컴포넌트 차이를 비교하는 과정은 여전히 필요합니다. 이는 애초에 가상 DOM과 비교(diffing) 알고리즘에 의존하는 리액트의 근본적인 접근 방식에서 비롯됩니다.

한편, TC39(자바스크립트 표준화 위원회)에서는 시그널 패턴을 언어 표준으로 만들기 위한 제안이 진행 중입니다. 이 제안은 "프로미스/A+가 ES2015의 프로미스 표준화에 선행했던 것처럼, 자바스크립트에서 시그널의 초기 공통 방향을 설명"하고 있습니다. Angular, Preact, Qwik, Solid, Svelte, Vue 등 여러 프레임워크의 개발자들이 이 표준화 작업에 참여하고 있으며, 이는 자바스크립트 생태계 전반의 통합을 목표로 합니다.

결국 리액트가 시그널 패턴을 채택하지 않더라도 프론트엔드 생태계 전반은 시그널 방향으로 움직이고 있습니다. 스벨트와 같은 프레임워크는 이미 컴파일 타임에 시그널과 유사한 반응성을 제공하고 있으며, 이는 리액트의 가상 DOM 비교 방식보다 더 효율적인 접근 방식으로 주목받고 있습니다.

시그널 패턴은 단순히 상태 관리의 새로운 추세가 아니라, 웹 애플리케이션에서 UI와 상태를 연결하는 근본적으로 더 효율적인 방법을 제시합니다. 이는 복잡한 애플리케이션에서 특히 중요한 의미를 갖습니다.

더 이상의 보일러 플레이트는 없다

리액트를 사용해 본 개발자라면 상태 업데이트를 위한 보일러플레이트 코드에 지쳐본 경험이 있을 것입니다. 특히 복잡한 객체나 배열을 다룰 때 불변성을 유지하기 위한 코드는 상당히 번거롭습니다. 스벨트는 이런 문제를 컴파일 시점에 프록시 패턴으로 우아하게 해결합니다. 코드 예시를 통해 스벨트의 문법이 얼마나 직관적이고 간결한지 살펴보겠습니다.

배열 조작: 리액트 vs 스벨트

리액트에서의 배열 업데이트

리액트에서 배열 항목을 추가하거나 제거할 때는 항상 불변성을 유지해야 합니다.

function TodoList() {
  const [todos, setTodos] = React.useState([
    { id: 1, text: "Learn React", completed: false },
    { id: 2, text: "Build an app", completed: false }
  ])
  
  const addTodo = (text) => {
    // 기존 배열을 복사하고 새 항목 추가
    setTodos([...todos, { 
      id: Date.now(), 
      text, 
      completed: false 
    }])
  }
  
  const removeTodo = (id) => {
    // 필터로 새 배열 생성
    setTodos(todos.filter(todo => todo.id !== id))
  }
  
  const toggleTodo = (id) => {
    // map으로 새 배열 생성하면서 특정 항목만 수정
    setTodos(todos.map(todo => 
      todo.id === id 
        ? { ...todo, completed: !todo.completed } 
        : todo
    ))
  }
  
  return (/* 렌더링 로직 */)
}

배열 조작을 위해 확산 연산자(`...`), `map()`, `filter()` 등을 사용해 항상 새 배열을 생성해야 합니다. 코드가 장황해지고 의도가 직관적으로 보이지 않습니다.

스벨트 5에서의 배열 업데이트

같은 기능을 스벨트 5로 구현하면 훨씬 간결해집니다.

<script>
  // 스벨트 5의 $state rune으로 반응형 상태 선언
  let todos = $state([
    { id: 1, text: "Learn Svelte", completed: false },
    { id: 2, text: "Build an app", completed: false }
  ])
  
  function addTodo(text) {
    // 직접 배열에 push - 변이(mutation)가 가능!
    todos.push({ 
      id: Date.now(), 
      text, 
      completed: false 
    })
  }
  
  function removeTodo(id) {
    // 원본 배열에서 직접 제거
    const index = todos.findIndex(todo => todo.id === id)
    if (index !== -1) {
      todos.splice(index, 1)
    }
  }
  
  function toggleTodo(id) {
    // 해당 항목을 직접 수정
    const todo = todos.find(todo => todo.id === id)
    if (todo) {
      todo.completed = !todo.completed
    }
  }
  
  function popLastTodo() {
    // pop()도 직접 사용 가능
    todos.pop()
  }
</script>

<!-- 스벨트 5 문법으로 마크업 -->
<ul>
  {each todos as todo}
    <li class={todo.completed ? "completed" : ""}>
      <span>{todo.text}</span>
      <button onclick={() => toggleTodo(todo.id)}>Toggle</button>
      <button onclick={() => removeTodo(todo.id)}>Delete</button>
    </li>
  {/each}
</ul>
<button onclick={popLastTodo}>Remove Last</button>

스벨트에서는 `$state()`로 상태를 선언하면 그 상태를 직접 변경할 수 있습니다. `.push()`, `.pop()`, `.splice()` 같은 배열 메서드를 직접 사용할 수 있습니다. 컴파일 시점에 스벨트는 이러한 메서드 호출을 가로채서 상태 변경을 감지하고 UI를 자동으로 업데이트합니다.

배열 요소 직접 수정의 간편함

리액트와 스벨트의 가장 큰 차이점 중 하나는 배열 요소를 직접 수정할 수 있는 능력입니다. 리액트에서는 특히 배열의 중간 요소를 수정할 때 고통스러운 경험을 하게 됩니다.

리액트에서 배열 요소 수정하기

function ItemList() {
  const [items, setItems] = React.useState([
    { id: 1, name: "Item 1", count: 0, details: { category: "A" } },
    { id: 2, name: "Item 2", count: 0, details: { category: "B" } },
    { id: 3, name: "Item 3", count: 0, details: { category: "A" } }
  ])
  
  // 특정 인덱스의 항목 수정
  const updateItemAtIndex = (index, newCount) => {
    setItems(items.map((item, i) => 
      i === index 
        ? { ...item, count: newCount } 
        : item
    ))
  }
  
  // 특정 인덱스의 중첩 속성 수정
  const updateItemCategory = (index, newCategory) => {
    setItems(items.map((item, i) => 
      i === index 
        ? { ...item, details: { ...item.details, category: newCategory } } 
        : item
    ))
  }
  
  return (
    <div>
      {items.map((item, index) => (
        <div key={item.id}>
          <span>{item.name}: {item.count}</span>
          <button onClick={() => updateItemAtIndex(index, item.count + 1)}>
            Increment
          </button>
          <span>Category: {item.details.category}</span>
          <button onClick={() => updateItemCategory(index, item.details.category === "A" ? "B" : "A")}>
            Toggle Category
          </button>
        </div>
      ))}
    </div>
  )
}

스벨트에서 배열 요소 수정하기

<script>
  let items = $state([
    { id: 1, name: "Item 1", count: 0, details: { category: "A" } },
    { id: 2, name: "Item 2", count: 0, details: { category: "B" } },
    { id: 3, name: "Item 3", count: 0, details: { category: "A" } }
  ])
  
  function updateItemAtIndex(index, newCount) {
    // 배열 요소 직접 수정!
    items[index].count = newCount
  }
  
  function updateItemCategory(index, newCategory) {
    // 중첩된 속성도 직접 수정!
    items[index].details.category = newCategory
  }
</script>

<div>
  {each items as item, index}
    <div>
      <span>{item.name}: {item.count}</span>
      <button onclick={() => updateItemAtIndex(index, item.count + 1)}>
        Increment
      </button>
      <span>Category: {item.details.category}</span>
      <button onclick={() => updateItemCategory(index, item.details.category === "A" ? "B" : "A")}>
        Toggle Category
      </button>
    </div>
  {/each}
</div>

스벨트에서는 `items[index].count = newCount`와 같이 배열의 특정 요소를 직접 수정할 수 있습니다. 중첩된 객체 속성도 `items[index].details.category = newCategory`처럼 바로 수정할 수 있습니다. 이것이 바로 스벨트의 가장 큰 매력 중 하나입니다.

바인딩 문법과 폼 처리의 간소화

리액트와 스벨트의 또 다른 큰 차이점은 바인딩 문법입니다. 스벨트는 양방향 바인딩을 자연스럽게 지원하여 폼 처리를 크게 간소화합니다.

리액트에서의 폼 처리

리액트에서는 입력 필드마다 `value`와 `onChange` 핸들러를 연결해야 합니다. 폼이 복잡해지면 코드도 복잡해지고, react-hook-form 같은 라이브러리를 도입하게 됩니다. 이는 폼 입력 때마다 컴포넌트가 다시 렌더링되는 리액트의 특성 때문입니다.

function SignupForm() {
  const [formData, setFormData] = React.useState({
    username: "",
    email: "",
    password: "",
    confirmPassword: "",
    agreeTerms: false
  })
  
  const [errors, setErrors] = React.useState({})
  
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target
    setFormData({
      ...formData,
      [name]: type === "checkbox" ? checked : value
    })
  }
  
  const validateForm = () => {
    // 생략: 유효성 검사 로직
  }
  
  const handleSubmit = (e) => {
    e.preventDefault()
    if (validateForm()) {
      // 폼 제출 로직
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
        {errors.username && <p className="error">{errors.username}</p>}
      </div>
      
      {/* 더 많은 필드들... */}
      
      <div>
        <label>
          <input
            type="checkbox"
            name="agreeTerms"
            checked={formData.agreeTerms}
            onChange={handleChange}
          />
          I agree to the terms
        </label>
        {errors.agreeTerms && <p className="error">{errors.agreeTerms}</p>}
      </div>
      
      <button type="submit">Sign Up</button>
    </form>
  )
}

스벨트 5에서의 폼 처리

<script>
  let formData = $state({
    username: "",
    email: "",
    password: "",
    confirmPassword: "",
    agreeTerms: false
  })
  
  let errors = $state({})
  
  function validateForm() {
    // 생략: 유효성 검사 로직
    return true
  }
  
  function handleSubmit() {
    if (validateForm()) {
      // 폼 제출 로직
    }
  }
</script>

<form onsubmit={handleSubmit}>
  <div>
    <label>Username:</label>
    <!-- 양방향 바인딩 - 핸들러 필요 없음 -->
    <input type="text" bind:value={formData.username} />
    {if errors.username}
      <p class="error">{errors.username}</p>
    {/if}
  </div>
  
  <!-- 더 많은 필드들... -->
  
  <div>
    <label>
      <!-- 체크박스도 간단하게 바인딩 -->
      <input type="checkbox" bind:checked={formData.agreeTerms} />
      I agree to the terms
    </label>
    {if errors.agreeTerms}
      <p class="error">{errors.agreeTerms}</p>
    {/if}
  </div>
  
  <button type="submit">Sign Up</button>
</form>

스벨트의 `bind:value`와 `bind:checked` 지시어를 사용하면 양방향 바인딩이 자동으로 설정됩니다. 별도의 이벤트 핸들러 없이도 입력값과 상태가 동기화됩니다.

리액트와 스벨트의 근본적 차이

리액트와 스벨트의 이런 차이는 단순한 문법 차이를 넘어 두 프레임워크의 근본적인 철학 차이에서 비롯됩니다.

리액트: 불변성과 완전한 리렌더링

리액트는 상태가 변경될 때마다 컴포넌트 함수를 다시 실행하고, 이전 결과와 새 결과를 비교합니다. 이 과정에서 불변성은 매우 중요합니다.

1. 상태 변경을 감지하기 위해 참조 비교를 사용합니다.

2. 컴포넌트가 불필요하게 리렌더링되는 것을 방지하기 위해 메모이제이션(React.memo, useMemo, useCallback)이 필요합니다.

3. 원본 객체를 직접 수정하면 리액트가 변경을 감지하지 못합니다.

이로 인해 리액트에서는 배열이나 복잡한 객체를 처리할 때 원본 데이터 구조를 복사하고 새 버전을 만들어야 합니다. 객체가 깊게 중첩될수록 더 많은 보일러플레이트 코드가 필요합니다.

스벨트: 직접 변경과 세밀한 업데이트

스벨트는 컴파일 시점에 반응성을 주입합니다.

1. 변수에 값을 할당하거나, 객체와 배열을 변형하는 것을 감지합니다.

2. 컴파일러가 변경 사항을 추적하고 필요한 DOM 업데이트만 실행합니다.

3. 전체 컴포넌트를 다시 실행하지 않고 변경된 부분만 업데이트합니다.

이런 접근 방식 덕분에 스벨트에서는 배열에 항목을 추가하기 위해 `items.push(newItem)`와 같은 직관적인 코드를 작성할 수 있고, 객체의 깊은 속성을 `user.preferences.notifications.email = true`와 같이 직접 수정할 수 있습니다.

올인원 프레임워크의 매력

프론트엔드 애플리케이션을 개발할 때 우리는 보통 여러 라이브러리를 조합해서 사용합니다. 리액트로 개발을 시작하려면 다음과 같은 결정을 해야 합니다:

• 상태 관리: Redux? MobX? Zustand? Recoil? Jotai? 아니면 Context API만 사용할까?
• 스타일링: CSS Modules? Styled-components? Emotion? CSS-in-JS vs CSS-in-CSS?
• 애니메이션: Framer Motion? React Spring? GSAP?

이런 선택지가 많다는 것은 유연성을 제공하지만, 동시에 "결정 피로(decision fatigue)"를 유발합니다. 또한 각 라이브러리마다 다른 API와 패턴을 배워야 하며, 라이브러리 간 통합 과정에서 예상치 못한 문제가 발생할 수 있습니다.

반면, 스벨트는 기본적으로 많은 기능을 내장하고 있는 "올인원" 프레임워크입니다. 스타일링, 애니메이션, 상태 관리 등을 위한 별도의 라이브러리 없이도 강력한 기능을 제공합니다. 이런 통합적 접근 방식은 개발 경험을 크게 향상시키고 번들 크기도 줄여줍니다.

컴포넌트 스코프 CSS: 모듈화가 기본

리액트에서 CSS를 모듈화하려면 CSS Modules, Styled Components 등의 추가 도구가 필요합니다. 그러나 스벨트에서는 스타일 모듈화가 기본 제공됩니다.

<script>
  let isActive = $state(false)
</script>

<button 
  class={isActive ? 'active' : ''} 
  onclick={() => isActive = !isActive}
>
  Toggle Me
</button>

<style>
  /* 이 스타일은 자동으로 이 컴포넌트에만 범위가 한정됩니다 */
  button {
    background: eee;
    border: 1px solid 999;
    border-radius: 4px;
    padding: 8px 16px;
  }
  
  .active {
    background: 67b3ff;
    color: white;
  }
</style>

`<style>` 태그 안에 작성한 CSS는 자동으로 해당 컴포넌트에만 적용됩니다. 클래스 이름이나 선택자가 다른 컴포넌트와 충돌할 걱정 없이 간단한 이름을 사용할 수 있습니다. 스벨트는 빌드 과정에서 이 스타일을 해싱하여 고유한 클래스 이름으로 변환합니다.

글로벌 스타일을 적용하고 싶다면 `:global()` 수정자를 사용하면 됩니다.

<style>
  :global(body) {
    margin: 0;
    font-family: sans-serif;
  }
  
  /* 후손 선택자에 글로벌 적용 */
  div :global(a) {
    color: purple;
  }
</style>

스벨트는 CSS 변수와 미디어 쿼리 같은 모든 최신 CSS 기능을 지원하며, 별도의 CSS-in-JS 라이브러리 없이도 동적 스타일링을 쉽게 구현할 수 있습니다.

전역 상태 관리: .svelte.ts와 Runes의 마법

리액트에서는 컴포넌트 외부에서 상태를 관리하려면 Redux, Zustand 같은 상태 관리 라이브러리가 필요합니다. `useState`와 같은 훅은 리액트 컴포넌트 내부에서만 사용할 수 있는 제약이 있습니다.

스벨트 5에서는 Runes 시스템을 통해 이 문제를 우아하게 해결합니다. `.svelte.ts` 파일을 사용하면 스벨트의 반응성 시스템을 컴포넌트 외부에서도 활용할 수 있습니다.

// counter.svelte.js
export function createCounter() {
  let count = $state(0);
  
  return {
    get count() { return count },
    increment: () => count += 1
  };
}

<!-- App.svelte -->
<script lang="ts">
  import { createCounter } from './counter.svelte.js';
  
  const counter = createCounter();
</script>

<button onclick={counter.increment}>
  clicks: {counter.count}
</button>

`.svelte.js`와 `.svelte.ts` 모듈에서는 컴포넌트 외부에서도 Runes를 사용할 수 있습니다. 리턴된 객체에서 `get` 프로퍼티를 사용하면 `counter.count`가 항상 현재 값을 참조합니다.

이런 방식으로 스벨트 5는 별도의 상태 관리 라이브러리 없이도, 전역 상태를 관리할 수 있게 해줍니다. 리액트의 Context API나 Redux와 같은 복잡한 설정 없이 간단하게 상태를 공유하고 업데이트할 수 있습니다.

내장 애니메이션과 트랜지션: 추가 라이브러리 없이도 가능

리액트에서 요소가 DOM에 추가되거나 제거될 때 애니메이션을 적용하려면, Framer Motion 같은 라이브러리가 필요합니다. 스벨트에서는 이런 기능이 기본으로 내장되어 있습니다.

<script>
  import { fade, fly, slide } from 'svelte/transition'
  import { elasticOut } from 'svelte/easing'
  
  let visible = $state(true)
</script>

<button onclick={() => visible = !visible}>
  Toggle
</button>

{if visible}
  <div transition:fade={{ duration: 300 }}>
    Fades in and out
  </div>
{/if}

{if visible}
  <div in:fly={{ y: 200, duration: 500 }} out:slide>
    Flies in, slides out
  </div>
{/if}

`transition:`, `in:`, `out:` 지시어를 사용하여 요소가 DOM에 추가되거나 제거될 때 애니메이션을 적용할 수 있습니다. 스벨트는 다양한 내장 트랜지션(fade, fly, slide, scale 등)과 이징 함수를 제공합니다.

중요한 점은 스벨트의 트랜지션이 CSS 애니메이션으로 컴파일된다는 겁니다. 자바스크립트로 DOM을 직접 조작하는 방식보다 성능이 뛰어납니다. 이는 특히 모바일 기기에서 중요한 장점입니다.

저는 이런 스벨트의 내장 API만 가지고 페이지 트랜지션 라이브러리를 만들었습니다. 리액트였다면 여러 외부 라이브러리를 조합해야 했을 기능을 스벨트에서는 내장 기능만으로 구현할 수 있었습니다.

통합된 경험의 가치

스벨트의 올인원 접근 방식은 여러 이점을 제공합니다.

1. 학습 비용 감소: 여러 라이브러리의 API 대신 일관된 패턴을 배울 수 있습니다.

2. 작은 번들 크기: 외부 의존성이 적어 최종 번들 크기가 작아집니다.

3. 개발 경험 향상: 도구 선택에 고민하는 대신 비즈니스 로직에 집중할 수 있습니다.

4. 최적화된 성능: 각 기능이 서로 잘 조화되어 최적의 성능을 발휘합니다.

5. 코드베이스 일관성: 모든 팀원이 동일한 패턴을 따르므로 코드 일관성이 향상됩니다.

특히 프레임워크가 많은 부분의 방향을 정해주기 때문에, 모든 프로젝트가 비슷한 코드 패턴을 갖게 되어 유지보수성이 크게 향상됩니다. 새로운 개발자가 팀에 합류하더라도 기존 코드베이스를 빠르게 이해할 수 있습니다.

독립적인 패키지들을 조합해 구성하는 리액트 생태계의 "LEGO 블록" 접근 방식도 장점이 있지만, 스벨트의 "올인원" 접근 방식은 특히 빠른 개발과 일관된 사용자 경험을 원하는 팀에게 매력적인 선택입니다. 외부 라이브러리에 의존하지 않고도 모던 웹 애플리케이션에 필요한 대부분의 기능을 내장하고 있어, 개발자는 "무엇을 사용할지"가 아닌 "어떻게 구현할지"에 집중할 수 있습니다.

“스벨트를 사랑해 주세요”

이번 글에서 살펴본 것처럼, 스벨트는 프론트엔드 개발의 다양한 문제를 혁신적인 방식으로 해결합니다. 시그널 패턴을 통한 세밀한 반응성, 직접적인 상태 변이를 허용하는 직관적인 문법, 그리고 외부 라이브러리 없이도 강력한 기능을 제공하는 올인원 접근 방식은 개발자 경험을 크게 향상시킵니다.

스벨트를 시작하는 것은 생각보다 쉬운데요. 부담 없이 시도해 볼 수 있는 몇 가지 방법을 소개해 볼게요.

작은 프로젝트부터 시작하기

• 어드민 페이지: 메인 서비스는 기존 프레임워크로 유지하면서, 어드민 대시보드를 스벨트로 구현해 보세요. 내부 도구는 실험적인 기술을 적용하기에 부담이 적습니다.
• 개인 블로그나 포트폴리오: 자신의 블로그나 포트폴리오 사이트를 스벨트로 만들어보세요. 마크다운 기반 블로그는 SvelteKit과 특히 궁합이 좋습니다.
• 마이크로 서비스나 위젯: 기존 앱에 추가하는 작은 기능(뉴스레터 구독 폼, 채팅 위젯 등)을 스벨트로 구현해 볼 수 있습니다.

백엔드 개발자를 위한 프론트엔드 입문

백엔드를 주로 다루는 개발자가 프론트엔드를 배우고 싶다면, 스벨트는 훌륭한 선택입니다. 복잡한 개념이나 보일러플레이트 코드 없이도 직관적으로 UI를 구현할 수 있어 진입 장벽이 낮습니다. 자바스크립트 기본 문법에 가까운 스벨트의 접근 방식은 백엔드 개발자들이 빠르게 적응할 수 있게 해줍니다. HTML, CSS, JavaScript를 자연스럽게 통합하는 방식도 초보자에게 친숙하게 다가오고요.

학습 자료

스벨트를 배우는 데 도움이 될 자료를 소개합니다.

• [공식 스벨트 튜토리얼]: 스벨트의 핵심 개념을 단계별로 배울 수 있는 인터랙티브 튜토리얼입니다.
• [스벨트 5 한국어 문서]: 제가 직접 튜토리얼과 문서를 한국어로 번역하고 있는 레포지토리입니다.

마치며

기술의 세계는 끊임없이 진화하고 있어서, 개발자라면 다양한 접근 방식을 경험하고 유연하게 이해하는 자세가 중요합니다. 특히 프론트엔드 개발은 변화가 빠르기 때문에 새로운 패러다임을 열린 마음으로 받아들이는 것이 필요하죠. 그런 의미에서 스벨트를 배우는 과정은 프론트엔드 개발의 본질적인 문제를 색다르게 바라볼 수 있는 좋은 기회입니다. 작은 프로젝트부터 천천히 시작하면서 직접 경험해 보면, 스벨트만의 깊은 매력을 더욱 생생하게 느낄 수 있을 겁니다.

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.