import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "다른 라이브러리와의 비교",
  "children": [{
    "depth": 2,
    "value": "React",
    "children": [{
      "depth": 4,
      "value": "마이그레이션을 위한 조언:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Vue",
    "children": [{
      "depth": 4,
      "value": "마이그레이션을 위한 조언:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Svelte",
    "children": [{
      "depth": 4,
      "value": "마이그레이션을 위한 조언:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Knockout.js",
    "children": [{
      "depth": 4,
      "value": "마이그레이션을 위한 조언:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Lit & LighterHTML",
    "children": [{
      "depth": 4,
      "value": "마이그레이션을 위한 조언:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "S.js",
    "children": []
  }, {
    "depth": 2,
    "value": "RxJS",
    "children": []
  }, {
    "depth": 2,
    "value": "Others",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    h4: "h4",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "다른-라이브러리와의-비교",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#다른-라이브러리와의-비교",
        children: "#"
      }), "다른 라이브러리와의 비교"]
    }), "\n", jsxs(_components.p, {
      children: ["이 섹션은 약간의 편견을 피할 수 없지만, 다른 라이브러리와 비교하여 Solid의 솔루션이 어느 위치에 있는지 이해하는 것이 중요하다고 생각합니다. 이건 성능에 대한 이야기가 아닙니다. 성능에 대해 확실히 알고 싶다면 ", jsx(_components.a, {
        href: "https://github.com/krausest/js-framework-benchmark",
        children: "JS Framework Benchmark"
      }), "를 참조하세요."]
    }), "\n", jsxs(_components.h2, {
      id: "react",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#react",
        children: "#"
      }), "React"]
    }), "\n", jsx(_components.p, {
      children: "React는 Solid에 큰 영향을 미쳤습니다. React의 단방향 흐름과 Hooks API의 읽기/쓰기의 명시적인 분리는 Solid의 API에 영향을 미쳤습니다. Solid는 프레임워크가 아닌 \"렌더링 라이브러리\"가 되는 것 이상의 목표를 가지고 있습니다. 애플리케이션 개발의 데이터 관리 접근 방식에 대해 강력한 의견을 가지고 있지만, 실행을 제한하지는 않습니다."
    }), "\n", jsx(_components.p, {
      children: "Solid가 React의 디자인 철학과 일치하지만, 근본적으로는 다르게 동작합니다. React는 가상 DOM을 사용하지만 Solid는 그렇지 않습니다. React의 추상화는 render 메서드를 반복적으로 호출하면서 변경된 부분을 확인하는 하향식 컴포넌트 분할입니다. 한편 Solid는 각 템플릿을 한 번만 렌더링하여 리액티브 그래프를 구성한 다음, 세분화된 변경과 관련된 명령을 실행합니다."
    }), "\n", jsxs(_components.h4, {
      id: "마이그레이션을-위한-조언",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#마이그레이션을-위한-조언",
        children: "#"
      }), "마이그레이션을 위한 조언:"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid의 업데이트 모델은 React 또는 React + MobX와 전혀 다릅니다. 함수형 컴포넌트를 ", jsx(_components.code, {
        children: "render"
      }), " 함수가 아닌 생성자로 생각하세요."]
    }), "\n", jsxs(_components.p, {
      children: ["Solid에서 props와 store는 추적과 리액티브 업데이트를 위해 프로퍼티에 접근하는 ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy",
        children: "프록시 객체"
      }), "입니다. 디스트럭쳐링을 하거나 미리 프로퍼티에 접근하는 경우 반응성을 잃거나 잘못된 시점에 트리거링되기 때문에 주의해야 합니다."]
    }), "\n", jsx(_components.p, {
      children: "Solid의 프리미티브에는 Hook 규칙과 같은 제한이 없으므로 자유롭게 중첩할 수 있습니다."
    }), "\n", jsxs(_components.p, {
      children: ["리스트의 행에 명시적인 키가 없더라도 \"키 첨부", "keyed", "\" 동작이 가능합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["React에서 ", jsx(_components.code, {
        children: "onChange"
      }), "는 입력 필드가 변경될 때마다 실행되지만, ", jsx(_components.code, {
        children: "onChange"
      }), "가 ", jsx(_components.a, {
        href: "https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange",
        children: "네이티브 동작 방식"
      }), "은 아닙니다. Solid에서는 ", jsx(_components.code, {
        children: "onInput"
      }), "을 사용하여 각 값의 변경을 구독합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["마지막으로 가상 DOM이 없기 때문에, ", jsx(_components.code, {
        children: "React.Children"
      }), "과 ", jsx(_components.code, {
        children: "React.cloneElement"
      }), "같은 필수 가상 DOM API가 Solid에는 없습니다. DOM 엘리먼트를 직접 생성하거나 수정하는 대신, 의도를 선언적으로 표현하는 것이 좋습니다."]
    }), "\n", jsxs(_components.h2, {
      id: "vue",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#vue",
        children: "#"
      }), "Vue"]
    }), "\n", jsx(_components.p, {
      children: "Solid는 설계 측면에서 특별히 Vue의 영향을 받지 않았지만, 접근 방식은 비슷합니다. 둘 다 읽기 기반의 자동 추적 기능이 있는 리액티브 시스템에서 프록시를 사용합니다. 하지만 비슷한 점은 여기까지입니다. Vue의 세분화된 의존성 탐지는 덜 세분화된 가상 DOM과 컴포넌트에 제공되는 반면, Solid는 직접 DOM 업데이트까지 세분화를 유지합니다."
    }), "\n", jsx(_components.p, {
      children: "Vue는 편의성을 중요하게 생각하고, Solid는 투명성을 중요하게 생각합니다. Vue 3에서의 새로운 접근 방식은 Solid의 접근 방식과 더 일치합니다. 이러한 라이브러리가 앞으로 어떻게 진화할지에 따라 더 일치하게 될 수도 있습니다."
    }), "\n", jsxs(_components.h4, {
      id: "마이그레이션을-위한-조언-1",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#마이그레이션을-위한-조언-1",
        children: "#"
      }), "마이그레이션을 위한 조언:"]
    }), "\n", jsxs(_components.p, {
      children: ["Vue 3에서 새로운 모던 리액티브 라이브러리로 익숙하게 마이그레이션할 수 있습니다. Solid의 컴포넌트는 Vue의 ", jsx(_components.code, {
        children: "setup"
      }), " 함수 마지막에 템플릿을 태그하는것과 매우 유사합니다. 상태 파생을 computation으로 덮어쓰지 않도록 주의하고, 함수를 사용해 보세요. 반응성이 넘쳐나게 됩니다. Solid의 프록시는 의도적으로 읽기 전용입니다. 사용하기 전에 미리 접근하지 마세요."]
    }), "\n", jsxs(_components.h2, {
      id: "svelte",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#svelte",
        children: "#"
      }), "Svelte"]
    }), "\n", jsxs(_components.p, {
      children: ["Svelte는 Solid도 어느 정도 채용하고 있는 \"미리 컴파일된 사라지는 프레임워크\"", "precompiled disappearing framework", "의 선구자입니다. 두 라이브러리 모두 리액티브하며, 정말 작은 크기의 실행 코드 번들링을 생성할 수 있지만, 작은 데모 코드의 경우 Svelte가 낫습니다. Solid는 선언할 때 더 많은 명시성을 요구하고 컴파일러의 암시적 분석에 대한 의존도를 낮추고 있는데, 이는 Solid의 뛰어난 성능의 원인이 되었습니다. Solid는 런타임에 많은 정보를 보유하고 있기 때문에 대형 애플리케이션의 확장시 유리합니다. 실제 업무에 대해 데모를 구현헀을때, Solid 구현체는 Svelte 구현체보다 크기가 25% 작습니다."]
    }), "\n", jsx(_components.p, {
      children: "두 라이브러리 모두 개발자가 더 적은 코드를 작성할 수 있도록 지원하지만, 접근 방식은 완전히 다릅니다. Svelte 3는 단순 객체 인터랙션과 양방향 바인딩에 중점을 둔 로컬 변경을 쉽게 처리하도록 최적화하는데 중점을 둡니다. Solid는 의도적으로 CQRS와 불변 인터페이스를 채택하여 데이터 흐름에 중점을 둡니다. Svelte의 템플릿 문법은 확실히 간결하지만, Solid는 함수형 템플릿 컴포지션을 사용해 Svelte보다 더 적은 코드로 개발할 수 있습니다."
    }), "\n", jsxs(_components.h4, {
      id: "마이그레이션을-위한-조언-2",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#마이그레이션을-위한-조언-2",
        children: "#"
      }), "마이그레이션을 위한 조언:"]
    }), "\n", jsx(_components.p, {
      children: "개발자 경험은 여러면에서 비슷하지만 매우 다른 경험입니다. Solid의 컴포넌트는 매우 저렴하기 때문에 컴포넌트 숫자가 늘어나는 것을 부끄러워할 필요가 없습니다."
    }), "\n", jsxs(_components.h2, {
      id: "knockoutjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#knockoutjs",
        children: "#"
      }), "Knockout.js"]
    }), "\n", jsx(_components.p, {
      children: "이 라이브러리는 Knockout 덕분에 존재합니다. 세분화된 의존성 탐지 모델을 현대화하는 것이 이 프로젝트의 동기였습니다. Knockout은 2010년에 릴리즈되었으며 마이크로소프트 익스플로러를 IE6 까지 지원하지만, Solid는 IE를 전혀 지원하지 않습니다."
    }), "\n", jsxs(_components.p, {
      children: ["Knockout의 바인딩은 런타임 로드되는 HTML 문자열일 뿐입니다. 이러한 바인딩은 컨텍스트 복제(", jsx(_components.code, {
        children: "$parent"
      }), " 등...)에 의존합니다. 반면 Solid는 자바스크립트 API에서 템플릿을 선택하기 위해 JSX나 태그된 템플릿 라이브러리를 사용합니다."]
    }), "\n", jsx(_components.p, {
      children: "가장 큰 차이점은 Solid는 동기화를 보장하기 위해 일괄 처리라는 접근 방식을 사용하는 반면, Knockout은 지연된 마이크로 태스크 대기열를 사용하는 deferUpdates가 있다는 점입니다."
    }), "\n", jsxs(_components.h4, {
      id: "마이그레이션을-위한-조언-3",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#마이그레이션을-위한-조언-3",
        children: "#"
      }), "마이그레이션을 위한 조언:"]
    }), "\n", jsx(_components.p, {
      children: "Knockout에 익숙하다면, Solid의 프리미티브들이 이상하게 보일 수 있습니다. 읽기/쓰기 분리는 의도된 것이며, 개발을 더 어렵게 만들기 위한 것이 아닙니다. state/action (Flux) 모델 채택을 고려해보세요. 이러한 라이브러리는 비슷해 보이지만, 다른 베스트 프랙티스를 홍보하고 있습니다."
    }), "\n", jsxs(_components.h2, {
      id: "lit--lighterhtml",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#lit--lighterhtml",
        children: "#"
      }), "Lit & LighterHTML"]
    }), "\n", jsx(_components.p, {
      children: "이 라이브러리는 매우 유사하며, Solid에 어느 정도 영향을 미쳤습니다. 대부분의 경우 Solid의 컴파일된 코드는 DOM의 초기 렌더링을 수행하는 데 매우 유사한 방법을 사용합니다. 템플릿 요소를 복제하거나 주석 플레이스홀더를 사용하는 것은 Solid와 이 라이브러리들의 공통점입니다."
    }), "\n", jsx(_components.p, {
      children: "가장 큰 차이점은 이러한 라이브러리가 가상 DOM을 사용하지 않는 반면, 하향식으로 렌더링을 처리하므로 정상적인 상태를 유지하기 위해 컴포넌트 분할이 필요하다는 점입니다. 이에 반해 Solid는 미세한 리액티브 그래프를 사용해 변경된 사항만 업데이트하고, 초기 렌더링에만 이 기법을 공유합니다. 이 방법은 네이티브 DOM에서만 가능한 초기 속도를 활용하고, 업데이트에 대해서는 가장 성능이 좋은 접근 방법을 제공합니다."
    }), "\n", jsxs(_components.h4, {
      id: "마이그레이션을-위한-조언-4",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#마이그레이션을-위한-조언-4",
        children: "#"
      }), "마이그레이션을 위한 조언:"]
    }), "\n", jsxs(_components.p, {
      children: ["이 라이브러리는 매우 작으며, 그 위에 구축하기 쉽습니다. 하지만 ", jsx(_components.code, {
        children: "<MyComp/>"
      }), "는 단순한 HTMLElement(배열이나 함수)가 아니라는 것을 염두에 두고 가급적 JSX 템플릿 안에 보관하는 것이 좋습니다. 호이스팅은 대부분 작동하지만 이것은 HTMLElement 팩토리가 아닌 렌더링 라이브러리라고 생각하는 것이 좋습니다."]
    }), "\n", jsxs(_components.h2, {
      id: "sjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#sjs",
        children: "#"
      }), "S.js"]
    }), "\n", jsx(_components.p, {
      children: "이 라이브러리는 Solid의 리액티브 설계에 가장 큰 영향을 미쳤습니다. Solid는 몇 년동안 S.js를 내부적으로 사용했지만 기능들의 차이로 다른 길을 걷게 되었습니다. S.js는 지금까지 가장 효율적인 리액티브 라이브러리 중 하나입니다. 디지털 회로와 같은 동기화된 타입 스텝으로 모든 것을 모델화해, MobX와 같은 라이브러리에서 발견되는 더 복잡한 메커니즘을 수행하지 않고서도 일관성을 확보하고 있습니다. Solid의 반응성은 결국 S와 MobX가 합쳐진 하이브리드와 같습니다. 이를 통해 개발자의 멘탈을 쉽게 유지하면서 대부분의 리액티브 라이브러리(Knockout, MobX, Vue)보다 더 나은 성능을 제공합니다. S.js는 궁극적으로 가장 뛰어난 리액티브 라이브러리지만, 그 차이는 가장 가혹한 합성 벤치마크를 제외하고는 차이가 거의 눈에 띄지 않습니다."
    }), "\n", jsxs(_components.h2, {
      id: "rxjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rxjs",
        children: "#"
      }), "RxJS"]
    }), "\n", jsx(_components.p, {
      children: "RxJS는 리액티브 라이브러리입니다. Solid는 Observable 데이터에 대한 유사한 아이디어를 가지고 있지만, 옵저버 패턴을 많이 다르게 사용합니다. 시그널은 Observable의 제한적인 형태와 같습니다만, 자동 의존성 탐지 패턴은 RxJS의 100개 이상의 오퍼레이터를 대체합니다. Solid는 이러한 접근 방식을 취할 수 있었고, 실제로 라이브러리 초기 버전에서는 유사한 오퍼레이터가 포함되어 있었지만, 대부분의 경우 계산시 자체 변환 로직을 작성하는것이 더 간단합니다. Observable이 콜드 스타트, 유니 캐스트 및 푸시 기반인 반면, 클라이언트에서의 많은 문제는 Solid의 기본 동작인 핫 스타트, 멀티 캐스트에 적합합니다."
    }), "\n", jsxs(_components.h2, {
      id: "others",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#others",
        children: "#"
      }), "Others"]
    }), "\n", jsx(_components.p, {
      children: "Angular 및 몇 가지 인기있는 라이브러리는 이 비교에서 빠졌습니다. 이러한 라이브러리에 대한 경험이 부족하기 때문에 적절한 비교를 할 수 없습니다. 일반적으로 Solid는 큰 프레임워크와 공통점이 적고 정면으로 비교하기가 훨씬 어렵습니다."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=comparison-cf74c454.js.map
