SolidJS

덤프버전 : r20240101





솔리드JS
SolidJS
파일:SolidJS.svg
제작자
Ryan Carniato
분류
웹 프레임워크
출시
2021년 6월 28일
언어
JavaScript
버전
1.7.0
라이선스
MIT 라이선스
링크
파일:홈페이지 아이콘.svg 파일:GitHub 아이콘.svg[[파일:GitHub 아이콘 화이트.svg

파일:X Corp 아이콘(블랙).svg
파일:디스코드 아이콘.svg

1. 개요
2. 특징
2.1. React와의 차이점
3. 예시
4. SolidStart
5. 관련 문서



1. 개요[편집]


SolidJS는 2021년 정식 출시한 오픈 소스 프론트엔드 웹 프레임워크이다.


2. 특징[편집]


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

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


2.1. React와의 차이점[편집]


JSX 라이브러리의 원조인 React의 사용법과 이 Solid의 차이점은, 톺아보기를 통해서도 주요 차이점을 확인할 수 있다.

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


3. 예시[편집]


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

React 구현 예제.
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 문법으로 작성한다.
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가지로 나오는데, 바로 속도와 번들링 사이즈다.
한 개발자가 같은 앱을 React 와 SolidJS로 구현하여 비교(영문)한 포스트 본문에서는,
  • React 앱의 스크립트 읽기 속도 475ms, 렌더링 속도 129ms, 배포 번들 크기는 핵심과 앱 순으로 각 161KB, 5KB
  • SolidJS 앱의 스크립트 읽기 속도 176ms, 렌더링 속도 79ms, 배포 번들 크기는 핵심과 앱 순으로 각 25KB, 5KB
앱 자체 크기의 차이는 유의미할 정도는 아니지만, 웹에서 구동할 핵심 라이브러리 크기부터 차이가 엄청나며, 게다가 스크립트 읽기 속도에서 확실히 차이가 나며 렌더링 속도도 유의미하게 상승했음을 도출했다.


4. SolidStart[편집]


공식 문서

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

번들링 도구로 SvelteKit, Nuxt.js와 마찬가지로 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 우선


5. 관련 문서[편집]




파일:크리에이티브 커먼즈 라이선스__CC.png 이 문서의 내용 중 전체 또는 일부는 2023-11-03 19:00:23에 나무위키 SolidJS 문서에서 가져왔습니다.