Solid.js 시작하기 - React보다 빠른 리액티브 프레임워크

Solid.js 시작하기 - React보다 빠른 리액티브 프레임워크

Solid.js란 무엇인가?

Solid.js 시작하기를 위해서는 먼저 이 혁신적인 프레임워크가 무엇인지 이해해야 합니다.

솔리드 프레임워크는 Ryan Carniato가 개발한 선언적이고 효율적인 JavaScript 라이브러리입니다.
React와 유사한 컴포넌트 기반 구조를 제공하면서도, 가상 DOM 없이 직접적인 DOM 업데이트를 통해 뛰어난 성능을 자랑합니다.

리액티브 프로그래밍 패러다임을 핵심으로 하는 Solid.js는 데이터 변화에 자동으로 반응하여 UI를 업데이트합니다.
이러한 특징 덕분에 개발자는 더 직관적이고 예측 가능한 코드를 작성할 수 있습니다.

import { createSignal } from "solid-js";

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

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>
        Increment
      </button>
    </div>
  );
}

위 예시에서 보듯이 Solid.js의 문법은 React와 매우 유사하지만, 내부 동작 방식은 완전히 다릅니다.
Signal이라는 개념을 통해 상태 변화를 추적하고, 필요한 부분만 정확히 업데이트합니다.

 

Solid.js 로고와 기본 아키텍처 다이어그램

---

왜 Solid.js를 선택해야 할까?

솔리드 프레임워크를 선택하는 이유는 명확합니다.
성능, 개발 경험, 그리고 번들 크기 모든 면에서 기존 프레임워크들을 앞서고 있습니다.

뛰어난 성능

Solid.js는 JS Framework Benchmark에서 지속적으로 최상위권을 기록하고 있습니다.
가상 DOM의 오버헤드 없이 세밀한 반응성을 제공하여, 대규모 애플리케이션에서도 일관된 성능을 보장합니다.

작은 번들 크기

React 대비 약 70% 작은 번들 크기로 초기 로딩 시간을 대폭 단축시킵니다.
모바일 환경에서의 사용자 경험 향상에 직접적으로 기여합니다.

친숙한 개발 경험

React 개발자라면 Solid js 시작하기가 매우 수월합니다.
JSX 문법과 컴포넌트 패턴이 유사하여 학습 곡선이 완만합니다.

실제 반응성

React의 useState와 달리, Solid.js의 Signal은 진정한 리액티브 프로그래밍을 가능하게 합니다.
상태 변화가 즉시 관련된 DOM 노드에 반영되어 불필요한 리렌더링을 완전히 제거합니다.

---

Solid.js 개발 환경 설정

Solid js 시작하기의 첫 번째 단계는 개발 환경을 구축하는 것입니다.

프로젝트 생성

# Vite 템플릿을 사용한 프로젝트 생성
npm create solid@latest my-solid-app
cd my-solid-app
npm install
npm run dev

TypeScript 설정

TypeScript 지원을 위한 추가 설정이 필요한 경우:

npm create solid@latest my-solid-app --template=ts

디렉토리 구조

my-solid-app/
├── src/
│   ├── components/
│   ├── pages/
│   ├── styles/
│   ├── App.tsx
│   └── index.tsx
├── public/
├── package.json
└── vite.config.ts

솔리드 프레임워크의 프로젝트 구조는 다른 모던 프론트엔드 프레임워크와 유사합니다.
컴포넌트 기반 아키텍처를 통해 재사용 가능하고 유지보수가 쉬운 코드를 작성할 수 있습니다.

---

기본 컴포넌트 작성하기

리액티브 컴포넌트 작성은 Solid.js의 핵심입니다.

함수형 컴포넌트

import { createSignal } from "solid-js";

function TodoItem(props) {
  const [completed, setCompleted] = createSignal(false);

  return (
    <div class={`todo-item ${completed() ? 'completed' : ''}`}>
      <input 
        type="checkbox" 
        checked={completed()} 
        onChange={(e) => setCompleted(e.target.checked)}
      />
      <span>{props.text}</span>
    </div>
  );
}

export default TodoItem;

Props와 이벤트 처리

Solid.js에서 props는 읽기 전용 객체로, 부모 컴포넌트에서 전달된 데이터를 안전하게 사용할 수 있습니다.

function Button(props) {
  return (
    <button 
      class={props.variant || 'primary'}
      onClick={props.onClick}
      disabled={props.disabled}
    >
      {props.children}
    </button>
  );
}

// 사용 예시
<Button variant="secondary" onClick={() => console.log('clicked')}>
  클릭하세요
</Button>

Solid.js 컴포넌트 생명주기와 데이터 흐름 다이어그램

---

리액티브 시스템 이해하기

솔리드 프레임워크의 가장 강력한 특징은 리액티브 시스템입니다.

Signal과 Effect

import { createSignal, createEffect } from "solid-js";

function DataFetcher() {
  const [data, setData] = createSignal(null);
  const [loading, setLoading] = createSignal(false);

  // Effect는 의존성이 변경될 때 자동으로 실행됩니다
  createEffect(async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  });

  return (
    <div>
      {loading() ? (
        <p>Loading...</p>
      ) : (
        <pre>{JSON.stringify(data(), null, 2)}</pre>
      )}
    </div>
  );
}

Memo와 최적화

import { createSignal, createMemo } from "solid-js";

function ExpensiveCalculation() {
  const [numbers, setNumbers] = createSignal([1, 2, 3, 4, 5]);

  // Memo는 의존성이 변경되지 않으면 재계산하지 않습니다
  const sum = createMemo(() => {
    console.log('Calculating sum...');
    return numbers().reduce((acc, num) => acc + num, 0);
  });

  return (
    <div>
      <p>Sum: {sum()}</p>
      <button onClick={() => setNumbers([...numbers(), Math.random()])}>
        Add Random Number
      </button>
    </div>
  );
}

이러한 리액티브 특성 덕분에 Solid js 시작하기가 다른 프레임워크보다 직관적입니다.
상태 변화가 자동으로 UI에 반영되므로 개발자는 비즈니스 로직에 더 집중할 수 있습니다.

---

상태 관리와 이벤트 처리

반응형

복잡한 애플리케이션에서는 효율적인 상태 관리가 필수입니다.

Store 패턴

import { createStore } from "solid-js/store";

function TodoApp() {
  const [todos, setTodos] = createStore([
    { id: 1, text: "Learn Solid.js", completed: false },
    { id: 2, text: "Build awesome apps", completed: false }
  ]);

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false
    };
    setTodos([...todos, newTodo]);
  };

  const toggleTodo = (id) => {
    setTodos(
      todo => todo.id === id,
      'completed',
      completed => !completed
    );
  };

  return (
    <div>
      <h1>Todo List</h1>
      <For each={todos}>
        {(todo) => (
          <TodoItem 
            todo={todo} 
            onToggle={() => toggleTodo(todo.id)} 
          />
        )}
      </For>
    </div>
  );
}

컨텍스트 API

전역 상태 관리를 위한 Context API 활용:

import { createContext, useContext } from "solid-js";
import { createStore } from "solid-js/store";

const AppContext = createContext();

export function AppProvider(props) {
  const [state, setState] = createStore({
    user: null,
    theme: 'light'
  });

  const value = {
    state,
    updateUser: (user) => setState('user', user),
    toggleTheme: () => setState('theme', 
      theme => theme === 'light' ? 'dark' : 'light'
    )
  };

  return (
    <AppContext.Provider value={value}>
      {props.children}
    </AppContext.Provider>
  );
}

export const useApp = () => useContext(AppContext);

솔리드 프레임워크의 상태 관리는 React보다 더 세밀하고 예측 가능합니다.
불변성을 유지하면서도 필요한 부분만 업데이트하여 성능을 최적화합니다.

---

React와의 성능 비교

728x90

Solid js 시작하기를 고려하는 주된 이유 중 하나는 성능입니다.

벤치마크 결과

Stefan Krause의 JS Framework Benchmark에 따르면:

• DOM 조작 속도: Solid.js가 React 대비 약 2-3배 빠름
• 메모리 사용량: 약 50% 적은 메모리 사용
• 번들 크기: 압축 후 기준 약 13KB (React는 42KB)

실제 성능 테스트

// 10,000개 항목을 렌더링하는 성능 테스트
function LargeList() {
  const [items, setItems] = createSignal(
    Array.from({length: 10000}, (_, i) => ({
      id: i,
      value: Math.random()
    }))
  );

  return (
    <div>
      <For each={items()}>
        {(item) => (
          <div key={item.id}>
            Item {item.id}: {item.value.toFixed(2)}
          </div>
        )}
      </For>
    </div>
  );
}

이러한 성능 차이는 리액티브 시스템의 효율성에서 비롯됩니다.
가상 DOM의 diff 과정 없이 직접 DOM을 업데이트하므로 오버헤드가 현저히 줄어듭니다.

 

React vs Solid.js 성능 비교 차트

---

실제 프로젝트 적용 사례

마이그레이션 전략

React에서 솔리드 프레임워크로 마이그레이션하는 단계별 접근법:

1. 점진적 마이그레이션: 새로운 기능부터 Solid.js로 구현
2. 컴포넌트 단위 교체: 성능이 중요한 컴포넌트부터 우선 교체
3. 상태 관리 통합: 기존 상태 관리 솔루션과의 호환성 확인

실제 사용 사례

// E-commerce 제품 필터링 컴포넌트
import { createSignal, createMemo, For } from "solid-js";

function ProductFilter() {
  const [products] = createSignal([
    {id: 1, name: "Laptop", category: "electronics", price: 1200},
    {id: 2, name: "Phone", category: "electronics", price: 800},
    {id: 3, name: "Book", category: "education", price: 25}
  ]);

  const [selectedCategory, setSelectedCategory] = createSignal("all");
  const [maxPrice, setMaxPrice] = createSignal(2000);

  const filteredProducts = createMemo(() => {
    return products().filter(product => {
      const categoryMatch = selectedCategory() === "all" || 
                           product.category === selectedCategory();
      const priceMatch = product.price <= maxPrice();
      return categoryMatch && priceMatch;
    });
  });

  return (
    <div class="product-filter">
      <div class="filters">
        <select onChange={(e) => setSelectedCategory(e.target.value)}>
          <option value="all">All Categories</option>
          <option value="electronics">Electronics</option>
          <option value="education">Education</option>
        </select>

        <input 
          type="range" 
          min="0" 
          max="2000" 
          value={maxPrice()} 
          onChange={(e) => setMaxPrice(Number(e.target.value))}
        />
        <span>Max Price: ${maxPrice()}</span>
      </div>

      <div class="product-list">
        <For each={filteredProducts()}>
          {(product) => (
            <div class="product-card">
              <h3>{product.name}</h3>
              <p>Category: {product.category}</p>
              <p>Price: ${product.price}</p>
            </div>
          )}
        </For>
      </div>
    </div>
  );
}

팀 도입 가이드라인

Solid js 시작하기를 팀 프로젝트에 도입할 때 고려사항:

• 기존 React 개발자의 학습 비용 최소화
• 점진적 마이그레이션을 통한 리스크 관리
• 성능 모니터링을 통한 효과 측정
• 커뮤니티 생태계 및 라이브러리 호환성 검토

---

생태계와 도구들

개발 도구

• Solid DevTools: 브라우저 확장 프로그램으로 개발 중 상태 추적 가능
• Vite: 빠른 빌드와 핫 리로딩 지원
• TypeScript: 완벽한 타입 지원으로 안정성 향상

유용한 라이브러리

// Solid Router 사용 예시
import { Routes, Route, A } from "@solidjs/router";

function App() {
  return (
    <div>
      <nav>
        <A href="/">Home</A>
        <A href="/about">About</A>
      </nav>

      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </div>
  );
}

스타일링 솔루션

• Solid Styled Components: CSS-in-JS 솔루션
• UnoCSS: 원자적 CSS 프레임워크
• Tailwind CSS: 유틸리티 우선 CSS 프레임워크

Solid.js 공식 문서에서 더 자세한 정보를 확인할 수 있습니다.

---

마무리

Solid js 시작하기는 현대 웹 개발의 새로운 패러다임을 경험하는 여정입니다.

솔리드 프레임워크는 React의 개발 경험을 유지하면서도 뛰어난 성능과 작은 번들 크기를 제공합니다.
리액티브 프로그래밍의 진정한 장점을 활용하여 더 효율적이고 예측 가능한 애플리케이션을 구축할 수 있습니다.

특히 성능이 중요한 프로젝트나 모바일 환경을 고려한 애플리케이션 개발에서 Solid.js의 장점은 더욱 두드러집니다.
React 개발자라면 친숙한 문법으로 빠르게 적응할 수 있으며, 점진적 마이그레이션을 통해 기존 프로젝트에도 안전하게 도입할 수 있습니다.

Solid js 시작하기를 통해 다음 단계의 프론트엔드 개발을 경험해보세요.
더 빠르고, 더 효율적이며, 더 즐거운 개발 경험이 여러분을 기다리고 있습니다.

---

관련 자료

• Solid.js 공식 튜토리얼
• Solid.js GitHub 리포지토리
• Solid.js 커뮤니티 Discord