SolidJS

<colbgcolor=#fff,#1f2023><colcolor=#446B9E,#85BDE6> 솔리드JS SolidJS
제작자	Ryan Carniato
분류	라이브러리
출시	2021년 6월 28일
언어	JavaScript
버전	1.9.0
라이선스	MIT 라이선스
| | |

1. 개요

2. 특징

2.1. React와의 차이점

• React 훅 함수들은 컴포넌트 함수 본문 내에서만 호출할 수 있으나, Solid는 그저 함수 범위만 맞으면 어디든 호출할 수 있다. 심지어 다른 컴포넌트 라이브러리에서도 사용할 수 있다.
• 가상 DOM을 사용하지 않기 때문에, Svelte 처럼 use: 특성을 적용하여 기존 JS 라이브러리 친화력 확보 등의 좁은 생태계를 타파할 수 있는 이점을 챙길 수 있다.
• React 컴포넌트 함수 본문은 상태가 바뀔 때마다 본문이 재작성되어 상태관리를 하지 않는 모든 데이터를 잃지만, Solid 는 재작성하지 않고 유지되기 때문에 let 변수를 통한 ref 참조가 가능할 정도로 유연한 대신, 리액트와는 달리 컴포넌트의 속성을 변수로 분해하여 관리할 수 없는 등의 제약 상황이 발생하여 React 경험자에게는 다소 불편할 수 있으며, 상태 관리 시 상태값을 가져올 때 함수처럼 호출해서 가져와야 한다.
• 위 React의 상태 변경에 따른 재작성 특성에 의해 React 는 if 문과 삼항 연산자, Array 메소드를 통한 반복문을 쉽게 구현하여 해결할 수 있으나, Solid는 본문이 유지되기 때문에 이를 사용하면 상태 변경에 따른 대응이 불가능하기 때문에 이를 위한 내장 컴포넌트를 제공하는데, <Show>나 <Switch> 컴포넌트로 조건문 대응, <For>나 <Index> 컴포넌트로 반복문을 대응할 수 있으며, 동적 컴포넌트는 <Dynamic> 컴포넌트를 통해여 해결할 수 있다.

3. 예시

#!syntax javascript
import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </>
  );
};

#!syntax javascript
import { createSignal } from "solid-js";

export default () => {
  const [a, setA] = createSignal(1);
  const [b, setB] = createSignal(2);

  function handleChangeA(event) {
    setA(+event.currentTarget.value);
  }

  function handleChangeB(event) {
    setB(+event.currentTarget.value);
  }

  return (
    <>
      <input type="number" value={a()} onChange={handleChangeA}/>
      <input type="number" value={b()} onChange={handleChangeB}/>

      <p>{a()} + {b()} = {a() + b()}</p>
    </>
  );
};

• React 앱의 스크립트 읽기 속도 475ms, 렌더링 속도 129ms, 배포 번들 크기는 핵심과 앱 순으로 각 161KB, 5KB
• SolidJS 앱의 스크립트 읽기 속도 176ms, 렌더링 속도 79ms, 배포 번들 크기는 핵심과 앱 순으로 각 25KB, 5KB

4. SolidStart

• 파일 시스템 기반 라우팅
• 렌더링 모드
• SSR(Server-side rendering)
• 스트리밍 SSR
• CSR(Client-side rendering)
• SSG(Static Site Generation)
• Streaming
• 코드 분할, 트리 쉐이킹 및 불필요한 코드 제거를 통한 빌드 최적화
• API 라우팅
• Fetch, Streams, WebCrypto와 같은 웹 표준을 기반으로 구축됨
• 많이 사용하는 플랫폼(Netlify, Vercel, AWS, Cloudflare 등)에 배포할 수 있는 어댑터
• CSS 모듈, SASS/SCSS
• TypeScript 우선

5. 관련 문서

• 웹 프레임워크
• 라이브러리
• React(라이브러리)
• Vue.js
• Svelte
• Astro(웹 프레임워크)
• JavaScript
• TypeScript
• SolidJS와 함께 되짚어보는 반응형 프로그래밍 - TOAST UI