SolidJs 시작하기 - 초보자 가이드

Solidjs는 사용자 인터페이스를 생성하는 데 도움이 되는 자바스크립트 라이브러리입니다. 가상 DOM을 사용하는 대신 내부에서 반응형 프로그래밍을 사용하여 DOM을 업데이트합니다.

주요 특징들

실제 DOM에 대한 세분화된 업데이트

1회 렌더링 정신 모델: 구성 요소는 보기를 설정하기 위해 한 번 실행되는 일반 JavaScript 함수입니다

.

자동 종속성 추적: 반응 상태에 액세스하면 이를 구독합니다

.

JSX, 프래그먼트, 컨텍스트, 포털, 서스펜스, 스트리밍 SSR, 점진적 수화, 오류 경계 및 동시 렌더링과 같은 최신 프레임워크 기능을 제공합니다.

웹 구성 요소 친화적이며 사용자 정의 요소를 작성할 수 있음

구성 요소와 반응형 프리미티브의 두 가지 기본 구성 요소 유형이 있습니다.

1. 구성 요소: 구성 요소는 props(input)을 인수로 받아들이고 JSX 요소를 반환하는 함수입니다.

const Hello = (props) => {
  return <h1>Hello {props.name}</h1>;
};

<Hello name="John" />;

2. Reactive Primitives: Reactive Primitives는 관찰할 수 있고 뷰가 최신 상태로 유지되도록 하는 값입니다. 신호, 메모 및 효과의 세 가지 핵심 프리미티브가 있습니다.

신호: 신호는 반응형 프로그래밍의 빌딩 블록입니다. 시간 경과에 따른 값 변화를 추적합니다.

효과: 효과는 부작용을 수행하는 데 사용됩니다. 종속성 변경 사항을 확인하는 데 사용됩니다. 반응과 달리 종속성을 수동으로 전달할 필요가 없습니다. Solid는 종속성을 자동으로 추적하고 종속성이 업데이트될 때마다 자동으로 함수를 다시 실행합니다.

메모: 메모를 사용하면 많은 반응형 계산에서 파생된 값을 효율적으로 사용할 수 있습니다.

간단한 예를 들어 이해해 보겠습니다.

import { render } from "solid-js/web";
import { createSignal, createEffect, createMemo } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount((c) => c + 1);

  createEffect(() => {
    console.log("Count Changed", count());
  });

  const value = createMemo(() => count() * count());
  console.log("Value", value());

  return (
    <div>
      <h1>{count()}</h1>
      <button type="button" onClick={increment}>
        Increment
      </button>
    </div>
  );
}

render(() => <Counter />, document.getElementById("app")!);

createSignal: 신호를 반환하고 신호를 업데이트하는 함수를 반환합니다.

// Solid
const [getCount, setCount] = createSignal(0);

// React
const [count, setCount] = useState(0);

참고: createSignal은 반응의 useState와 같습니다. 유일한 차이점은 2개의 함수 getter 및 setter를 반환한다는 것입니다.

createEffect: 신호가 변경될 때 호출될 함수를 받아들입니다. 종속성이 없으면 신호가 변경될 때마다 호출됩니다.

// Solid
createEffect(() => {
  console.log("count changed", getCount());
});

// React
useEffect(() => {
  console.log("count changed", count);
}, [count]);

참고: createEffect는 반응의 useEffect와 같습니다. 종속성 배열이 필요하지 않습니다.

createMemo: createMemo는 주어진 함수의 반환 값과 동일한 읽기 전용 반응 값을 생성하고 종속성이 변경될 때만 함수가 실행되도록 합니다.

// Solid
const value = createMemo(() => computeExpensiveValue(a(), b()));

// React
const value = useMemo(() => computeExpensiveValue(a(), b()), [a, b]);

참고: createMemo는 반응의 useMemo와 같습니다. 종속성 배열이 필요하지 않습니다.

솔리드 온라인 시도

Solid로 시작하는 것은 온라인으로 시도하는 것입니다. https://playground.solidjs.com은 아이디어를 시도하는 쉬운 방법입니다.

로컬 설정:

> npx degit solidjs/templates/ts counter-app
> cd counter-app
> npm i
> npm run dev

읽어주셔서 감사합니다 😊

질문이나 추가 사항이 있습니까? 댓글을 남겨주세요.




당신이하지 않은 경우 읽어야합니다
















자세한 내용은 .


Github , , , Medium , Stackblitz에서 나를 잡아라.