React는 현대 웹 개발에서 지금까지 가장 큰 프론트 엔드 자바 스크립트 프레임 워크입니다. 하지만 Svelte는 지난 몇 년 동안 꾸준히 인기를 얻고 있습니다. Svelte가 특별한 이유.

• 구문을 배우기 매우 쉽습니다.
• 프레임 워크를 브라우저에 전달하는 대신 코드가 표준 js로 컴파일되어 번들 크기가 훨씬 작아지고 코드가 엄청나게 빠릅니다.

SolidJS는 구문이 React와 매우 유사하지만 Svelte와 같은 최신 자바 스크립트로 컴파일 된 프런트 엔드 UI 프레임 워크로 사람들이 Svelte의 속도와 번들 크기를 얻을 수 있지만 익숙한 React 구문을 사용할 수 있습니다.

SolidJS 프로젝트 설정

다음 명령을 실행하여 새 프로젝트를 생성하십시오.

npm init solid app ProjectName

또는 타이프 스크립트

npm init solid app-ts ProjectName

같은 것

• 생성 된 프로젝트의 파일 구조는 create-react-app처럼 느껴 져야합니다.
• JSX는 여전히 JSX처럼 작동합니다.

따라서 React에서는 일반적으로 useState 후크를 사용하여 상태 변수를 생성하고 프로세스는 이제 createSignal 함수를 사용하는 것을 제외하고 SolidJS에서 거의 동일하게 작동합니다.

import {createSignal} from "solid-js"
import './App.css';
function App() {
// create state
  const [count, setCount] = createSignal(1)
// add function
  const add = () => {
    //notice in this context I must invoke the state to get the value (not in jsx)
    setCount(count() + 1)
  }
// JSX works like normal
  return (
    <div class="App">
      <h1>My Counter</h1>
      <h2>{count}</h2>
      <button onClick={add}>Add</button>
    </div>
  );
}
export default App;

수명주기 및 createEffect

Solid에서의 사고는 React에서의 사고에서 매우 다른 부분입니다. React에서 전체 구성 요소는 구성 요소의 함수 본문에서 함수 호출에 대한 상태를 변경할 때 무한 루프를 가능하게하는 업데이트 상태를 업데이트 할 때마다 다시 실행되는 함수입니다. React에서 이에 대한 해결책은 컴포넌트 함수의 모든 렌더링이 아닌 원할 때 실행되도록 useEffect 후크를 사용하여 이러한 종류의 코드를 자체 클로저로 이동하는 것입니다.

Solid는 가상 DOM을 사용하지 않으며 상태 업데이트시 구성 요소 기능을 다시 실행하지 않습니다. 대신 Reactive 코드는 createEffect 호출에 래핑되어 내부의 신호가 업데이트되면 함수를 다시 실행합니다. 이것의 이점은…

• 무한 루프를 피하기 위해 useEffect에서 래핑하지 않고도 Fetch / Axios 호출을 수행 할 수 있습니다.
• JSX는 자동으로 createEffect 호출로 컴파일되므로 상태가 업데이트 될 때 업데이트됩니다.

이것에 대한 좋은 점은 업데이트가 더 세분화되어 가상 DOM 비용이 필요하지 않다는 것입니다 (업데이트 된 데이터에 의존하는 코드 만 비교를 실행하지 않고도 변경됩니다).

결론

Solid는 React Syntax의 장점을 유지하면서도 Svelte의 성능 향상 접근 방식을 사용합니다. SolidJS가 Svelte 및 React와 같은 프레임 워크의 동일한 맥락에서 성장하는 것을보고 놀라지 않을 것입니다!