Ukjin Yang

또다른 JSX 기술 라이브러리, Solid.js가 있다.
 / 
        solid
      
    

Website • API Docs • Features Tutorial • Playground • Discord
Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun.
import { createSignal } from "solid-js";
import { render } from "solid-js/web";
function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        {doubleCount(
…
  
View on GitHub
이걸로 잠시 관리자 페이지를 만들다가 협업의 어려움으로 React로 전환한 뼈아픔이 있었지만, Solid도 상당히 매력적인 라이브러리다.
그래서 이제서야 꺼내게 되었다. React와 Solid.js의 차이점을.
기본적으로, 일단 Solid.js 들어본 적 있다면 이미 알고 있을 것이다.
그래서, 이들의 장단점을 정리하면 대충 이렇다.
장점: 렌더링 전의 자주 발생하는 변경사항을 빠르게 정리할 수 있다.
단점: 렌더링 할때마다 가상DOM을 경유하여 실제DOM으로 옮기기 때문에 상대적으로 렌더링 속도가 느리다.
적합한 케이스: 태그 변경이 많이 일어나는 데이터그리드, 차트 등의 업무 중심의 컴포넌트
장점: 렌더링 빈도가 적을 수록 성능이 빨라진다.
단점: 렌더링 빈도가 많을 수록 성능이 느려진다.
적합한 케이스: 태그 변경이 적게 일어나는 CMS, 쇼핑몰에 쓰는 컨텐츠 중심의 컴포넌트
따라서, 이 문제에 대해서는, 당신의 앱이 어느 쪽이 적당할 지는 직접 써보고 판단해야 할 문제인 것이기 때문에, 존중이니 취향해 드리겠다.
리액트의 기본 상태관리 함수는 useState 이다.
createSignal 이다.
이 둘의 차이점을 알아보자.
상태관리 함수는 React 컴포넌트 함수 내에서만 호출이 가능하다.
React 상태관리는 빌드 과정을 거쳐 렌더링 상태의 기준을 정의한다.
상태관리 함수들은 컴포넌트 내외 모두 호출이 가능하다.
setter 호출만 해도 상태를 바꾸는 옵션도 설정할 수 있다.
// 두번째 인자에 옵션이 있는데, 아래처럼 하면 상태값이 같아도 상태가 바뀐다.
const [, render] = createSignal(undefined, { equals: false })
(만약 React 에서 같은 기능을 구현하려면, 최대한 랜덤 수를 세팅하는 useState 기반 함수를 만들든가, @react-hookz/web 유틸리티의 useRender 훅을 이용하면 된다.)
여기서 주의사항! 솔리드의 상태관리 결과물은 대부분 함수다! 따라서 호출해야 한다! 애초에 시스템이 다른데, 리액트가 렌더링 시 컴포넌트 함수 본문를 갈아엎기 때문에 가능하지만, 솔리드는 함수 원형을 유지하고 상태관리가 별개로 작동하기 때문이다.
const [getter, setter] = createSignal()
setTimeout(() => setter('메롱'), 1000)
// react와 달리 getter 는 함수로 호출해야 한다!
return <div>{getter()}</div>
둘의 차이 별로 없다. 기능도 딱히 차이점 없으니 그냥 쓰던대로 쓰면 된다.
사실상 다이렉트로 동적 컴포넌트 호출 가능하다. 하지만, 빌드가 필요하고, 컴포넌트 함수임을 인지해야 하기 때문에 상수를 선언 후 그 상수를 컴포넌트 함수로 사용하는 살짝 번거로운 방법을 써야 한다. (JSX,TSX 한정, JS/TS일 경우 그럴 필요 없이 컴포넌트 함수임이 확실하면 함수처럼 호출하거나, 태그일 경우 React.createElement 함수 쓰면 됨)
export default function MyDynamicComponent({ tag, ...props }) {
  const Dynamic = tag
  return (<Dynamic {...props} />)
}
Vue나 Svelte 처럼 Solid 에서도 동적 컴포넌트를 정의하는 내장 컴포넌트인 <Dynamic> 컴포넌트를 사용한다.
export default function MyDynamicComponent({ tag, ...props }) {
  return (<Dynamic as={tag} {...props} />)
}
리액트는 조건문과 반복문을 직접적으로 지원한다. 어자피 빌드하니까. 어자피 상태 바뀌면 본문 갈아 엎으니까~ 화성 갈끄니께~
function MyConditionalComponent({ isShow }) {
  return (<div>
    {isShow && '앱있음'}
  </div>)
}
function MyForeachComponent({ list }) {
  return (<ul>
    {list.map(row => (<li>{row.name}</li>)}
  </ul>)
}
솔리드는 직접적인 스크립트 렌더링을 지원하지 않는다. 본문이 안갈아엎어지는데 될 리가... 그래서 솔리드는 조건문과 반복문을 컴포넌트로 지원한다.
function MyConditionalComponent({ isShow }) {
  return (<div>
    <Show when={isShow}>앱있음</Show>
  </div>)
}
function MyForeachComponent({ list }) {
  return (<ul>
    <For each={list}><li>{row.name}</li></For>
  </ul>)
}
둘이 비슷하다. lazy 함수가 있고 <Suspense> 컴포넌트가 두 진영 다 내장되어 있는데, 그냥 뭐 React 따라갔다고 보면 된다. 어자피 JSX가 애초에 리액트를 위해 태어난 놈이니 JSX 쓰는 다른 것들이 어쩌겠니...
먼저 리액트는 기본적으로 상태관리가 내부적으로 비동기로 진행될 뿐, 직접적인 비동기에 대한 대응을 편리하게 지원하지 않는다. 그 때문에 이를 쉽게 해결하기 위해 많이들 찾는게 바로 TanStack Query, 구 react-query 많이들 썼을 것이다.
TanStack Query가 Solid를 지원하기 시작했지만, 솔리드 자체적으로 createResource 훅 함수를 통해 비동기를 대응할 수 있는 기본적인 유틸리티를 제공한다.
리액트는 useRef 훅이 있다. 이녀석은 기본적으로 값이 바뀌어도 렌더링되지 않기 때문에, 컴포넌트 참조 뿐만 아니라 반응성이 없어야 되는 영역에서도 두루 쓰이고 있다.
function RefComponent() {
  const myDiv = useRef()
  useEffect(() => console.log(myDiv.current), []);
  return (<div ref={myDiv}>뭐임마</div>)
}
솔리드는 따로 훅이 없고, 그냥 let 변수를 선언한 걸 그냥 뙇 걸기만 해도 된다. 함수 본문이 유지가 되기 때문에 가능한 일. Svelte와 비슷하다 생각하면 된다.
function RefComponent() {
  let myDiv
  onMount(() => console.log(myDiv));
  return (<div ref={myDiv}>뭐임마</div>)
}
React 처럼 콜백으로 받을 수 있다. 하지만 Solid에서는 더 강력한 요소의 상태관리 기능을 지원하는데,
바로 use: 속성이다. 이건 Svelte에도 있는 기능인데, 하나의 상태관리 영역으로 취급하기 때문에, 여기서도 컴포넌트 초기화될 때 호출하는 onMount 함수와 컴포넌트 정리할 때 onCleanup 함수를 쓸 수 있다.
onMount 함수 호출은 필요없고, removeEventListener 같이 정리가 필요할 경우에 onCleanup 함수의 콜백 인자에 구현하면 된다.
export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener("click", onClick);
  onCleanup(() => document.body.removeEventListener("click", onClick));
}
타입스크립트 한정해서 단점은, use: 속성은 컴포넌트 속성에 당연히 없고 정의할 수 없기 때문에, 타입 정의를 어딘가에 해줘야 한다.
declare module "solid-js" {
  namespace JSX {
    interface Directives {
      clickOutside?: () => void;
    }
  }
}
만약 ref 콜백을 사용한다면, 해당 컴포넌트 함수 본문에 onCleanup 함수 호출하면 된다. 선택은 자유.
React와 달리 앙상한 생태계에서, Svelte와 같이 생태계 의존도를 줄일 수 있는 중요한 기능이라 하겠다.
그밖에 더 있긴 한데 일단 핵심만 짚어줬다. 더 알아보고 싶으면 직접 비교해보라 내 손 아파서 이만.
끗.

React와 Solid의 차이점 톺아보기

댓글