}}} 컴포넌트를 통해여 해결할 수 있다.
== 예시 ==
예를 들어, 두 개의 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 (
<>
{a} + {b} = {a + b}
>
);
};}}}
그리고 본 문서인 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 (
<>
{a()} + {b()} = {a() + b()}
>
);
};}}}
사실 이렇게 보면 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]]
캡챠