본문으로 건너뛰기
Advertisement

Solid.js 기초

Solid.js는 React와 유사한 문법(JSX)을 사용하면서도, 내부적으로는 Svelte처럼 가상 DOM 없이 직접적인 DOM 업데이트를 수행하는 고성능 라이브러리입니다.

1. Solid.js의 철학​

  • No Virtual DOM: 가상 DOM의 오버헤드 없이 최적화된 업데이트를 수행합니다.
  • Fine-grained Reactivity: 리액트와 달리 컴포넌트 전체가 다시 실행되지 않고, 변경된 특정 부분만 효율적으로 업데이트됩니다.
  • JSX 활용: 리액트 사용자라면 아주 익숙하게 시작할 수 있습니다.

2. Signal (상태 관리)​

Solid의 핵심은 Signal입니다.

import { createSignal } from "solid-js";

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

  return (
    <button onClick={() => setCount(count() + 1)}>
      {count()}
    </button>
  );
}

3. 리액트와의 차이점​

  • 리액트 컴포넌트는 상태가 변할 때마다 함수 전체가 다시 실행되지만, Solid 컴포넌트는 단 한 번만 실행 됩니다. 이후에는 Signal을 구독하는 부분만 업데이트됩니다.
  • 훅(Hooks)의 규칙 제약이 거의 없습니다.

4. 왜 Solid.js인가?​

성능 벤치마크에서 거의 항상 최상위권을 유지하며, 리액트의 패러다임이 익숙하면서도 더 극단적인 성능을 원하는 개발자들에게 추천됩니다.

Advertisement
Advertisement