[Solid] Solid.js 란? / 사용법

 

 

Solid.js 란?

Svelte에서 영감을 얻는 javascript 프로젝트로 (2022)

React.js 코드(JSX)를 작성하면, 이를 js코드로 컴파일 해주는 컴파일러 (SPA 만들기)

 

필요성

React 개발자가, Svelte를 따로 배우지 않고도,

Svelte의 보다 빠른 실행 속도를 가지고 있다 ㄷㄷ

state of js 2022 결과

 

Svelte 사용법

 

설치

# js
npx degit solidjs/templates/js my-app

# ts
npx degit solidjs/templates/ts my-app

# tailwindcss
npx degit solidjs/templates/ts-tailwind my-app

cd my-app

npm i

 

실행

npm run dev

 

폴더 구조 및 설명

index.html - 실제 렌더링 되는 페이지

index.tsx - 렌더링하는 js 함수가 들어있는 위치

App.tsx - 실제로 렌더링되는 첫 페이지 ( entry point )

 

컴포넌트 모습

import type { Component } from 'solid-js';

import logo from './logo.svg';
import styles from './App.module.css';

const App: Component = () => {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          class={styles.link}
          href="https://github.com/solidjs/solid"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Solid
        </a>
      </header>
    </div>
  );
};

export default App;

 

한줄평

React 커뮤니티의 사용자들에게 너무나 친숙한 프로그래밍으로,

더 빠른 앱을 만드는 방식이, Svelte보다 메리트 있다고 본다.