Solid.js는 2021년 Ryan Carniato가 만든 고성능 선언형 UI 라이브러리다. React와 비슷한 JSX 문법을 사용하지만 가상 DOM이 없고, 세밀한 반응성(Fine-grained Reactivity) 시스템으로 실제 DOM을 직접 업데이트해 최고 수준의 성능을 제공한다.
React와 차이점
| 항목 | React | Solid.js |
|---|
| 반응성 | 컴포넌트 재렌더링 | 세밀한 DOM 업데이트 |
| 가상 DOM | 있음 | 없음 |
| JSX 컴파일 | 함수 호출 | 템플릿 클론 |
| 컴포넌트 실행 | 매 렌더마다 | 딱 한 번 |
| 성능 | 빠름 | 매우 빠름 |
기본 사용법
jsx
// Solid.js: 컴포넌트는 한 번만 실행됨
import { createSignal, createMemo, createEffect } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
const doubled = createMemo(() => count() * 2); // 자동 메모이제이션
createEffect(() => {
console.log('count 변경:', count()); // 의존성 자동 추적
});
return (
<div>
<p>카운트: {count()}</p>
<p>2배: {doubled()}</p>
<button onClick={() => setCount(c => c + 1)}>증가</button>
</div>
);
}
내장 제어 흐름 컴포넌트
jsx
import { For, Show, Switch, Match } from 'solid-js';
function App() {
const [items] = createSignal([1, 2, 3]);
const [show, setShow] = createSignal(true);
return (
<>
{/* 조건부 렌더링 */}
<Show when={show()} fallback={<p>숨겨짐</p>}>
<p>보임!</p>
</Show>
{/* 리스트 렌더링 (키 자동 처리) */}
<For each={items()}>
{(item) => <li>{item}</li>}
</For>
</>
);
}
스토어
javascript
import { createStore } from 'solid-js/store';
const [state, setState] = createStore({ count: 0, user: { name: 'Alice' } });
setState('count', c => c + 1); // 세밀한 업데이트
setState('user', 'name', 'Bob'); // 중첩 경로 업데이트
관련 개념
