[include(틀:웹 프레임워크)]

||<-2><table width=350><table align=right><table bordercolor=#446B9E><colbgcolor=#446B9E><colcolor=#fff><table bgcolor=#fff,#446B9E> {{{+1 '''솔리드JS'''}}}[br]SolidJS ||
||<-2><bgcolor=#fff> [[파일:SolidJS.svg|width=100%]] ||
||<width=30%> '''제작자''' ||Ryan Carniato ||
|| '''분류''' ||[[웹 프레임워크]] ||
|| '''출시''' ||[[2021년]] [[6월 28일]] ||
|| '''언어''' ||[[JavaScript]] ||
|| '''버전''' ||1.7.0 ||
|| '''라이선스''' ||MIT 라이선스 ||
|| '''링크''' ||[[https://www.solidjs.com/|[[파일:홈페이지 아이콘.svg|width=20]]]] [include(틀:GitHub 로고,링크=solidjs/solid,크기=20)] [include(틀:트위터 로고,링크=solid_js,크기=20)] [[https://discord.com/invite/solidjs|[[파일:디스코드 아이콘.svg|width=20]]]] ||

[목차]
[clearfix]
== 개요 ==
SolidJS는 [[2021년]] 정식 출시한 오픈 소스 [[프론트엔드(프로그래밍)|프론트엔드]] [[웹 프레임워크]]이다.

== 특징 ==
[[React(라이브러리)|React]] 에서 사용하는 [[React(라이브러리)#s-4|JSX]] 문법을 사용하며, 가장 빠른 성능과 가장 정확한 반응성을 강점으로 내세우고 있다. 나온지 얼마 안 됐음에도 벌써 [[Cloudflare]], [[Netify]] 등 주요 클라우드 업체에서 주목받고 사용하는 웹 프레임워크이다.

[[Svelte]]처럼 가상DOM을 사용하지 않는 라이브러리이다. 가상DOM 사용 및 미사용의 차이, 장단점은 React 와 Svelte 각 문서에 설명된 바 있다.

=== React와의 차이점 ===
JSX 라이브러리의 원조인 React의 사용법과 이 Solid의 차이점은, [[https://dev.to/composite/reactwa-solidyi-caijeom-topabogi-4e23|톺아보기]]를 통해서도 주요 차이점을 확인할 수 있다.

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

== 예시 ==
예를 들어, 두 개의 input 요소에서 숫자를 입력받고 그 숫자들을 더한 값을 출력해주도록 구현을 한다고 가정하자.

[[React(라이브러리)|React]] 구현 예제.
{{{#!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>
    </>
  );
};}}}

그리고 본 문서인 SolidJS의 구현 예제. React 와 동일하게 JSX 문법으로 작성한다.
{{{#!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 와는 달리 함수 차이 말고는 별다른 문법적 차이는 없어 보인다. JSX 문법을 사용하고, 패턴도 React 와 차이가 없다.
그러나, React와 달리 라이브러리의 진가는 2가지로 나오는데, 바로 속도와 번들링 사이즈다.
[[https://ogzhanolguncu.com/blog/react-vs-solid|한 개발자가 같은 앱을 React 와 SolidJS로 구현하여 비교(영문)]]한 포스트 본문에서는,
 * React 앱의 스크립트 읽기 속도 475ms, 렌더링 속도 129ms, 배포 번들 크기는 핵심과 앱 순으로 각 161KB, 5KB
 * SolidJS 앱의 스크립트 읽기 속도 176ms, 렌더링 속도 79ms, 배포 번들 크기는 핵심과 앱 순으로 각 25KB, 5KB
앱 자체 크기의 차이는 유의미할 정도는 아니지만, 웹에서 구동할 핵심 라이브러리 크기부터 차이가 엄청나며, 게다가 스크립트 읽기 속도에서 확실히 차이가 나며 렌더링 속도도 유의미하게 상승했음을 도출했다.

== SolidStart ==
[[https://start.solidjs.com/|공식 문서]]

SolidJS에 라우터, SSR, SSG 등의 기능을 추가한 메타 프레임워크이다. [[Next.js]], [[Svelte#SvelteKit|SvelteKit]], Nuxt.js와 유사한 기능을 지원한다. 23년 8월 기준 아직 베타버전이다. 

번들링 도구로 SvelteKit, Nuxt.js와 마찬가지로 [[Vue.js#Vite|Vite]]를 사용한다.

지원하는 기능 및 특징은 아래와 같다.
 * 파일 시스템 기반 라우팅
 * 렌더링 모드
   * 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]] 우선

== 관련 문서 ==
 * [[웹 프레임워크]]
 * [[라이브러리]]
 * [[React(라이브러리)]]
 * [[Vue.js]]
 * [[Svelte]]
 * [[Astro(웹 프레임워크)]]
 * [[JavaScript]]
 * [[TypeScript]]
 * [[https://ui.toast.com/weekly-pick/ko_20220331|SolidJS와 함께 되짚어보는 반응형 프로그래밍]] - [[토스트(브랜드)|TOAST]] UI

[[분류:웹 프레임워크]][[분류:JavaScript]]