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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "자주하는 질문",
  "children": [{
    "depth": 3,
    "value": "가상 DOM 을 사용하지 않는 JSX라구요? 베이퍼웨어인가요? 저명한 발언들에서 이건 불가능하다고 말하는 것을 들었습니다.",
    "children": []
  }, {
    "depth": 3,
    "value": "Solid는 얼마나 성능이 좋은가요?",
    "children": []
  }, {
    "depth": 3,
    "value": "React와 호환성이 있나요? 아니면 React로 작성한 라이브러리를 Solid에서 사용할 수 있나요?",
    "children": []
  }, {
    "depth": 3,
    "value": "왜 템플릿에서 map을 사용할 수 없나요? <For>와 <Index>의 차이점은 뭔가요?",
    "children": []
  }, {
    "depth": 3,
    "value": "왜 props를 디스트럭처링하게 되면 반응성을 잃게 되나요?",
    "children": []
  }, {
    "depth": 3,
    "value": "왜 onChange 이벤트 핸들러가 제 때 호출되지 않는건가요?",
    "children": []
  }, {
    "depth": 3,
    "value": "클래스 컴포넌트에 대한 지원을 추가할 수 있나요? 라이프 사이클이 더 추론하기 쉽다고 생각합니다.",
    "children": []
  }, {
    "depth": 3,
    "value": "JSX를 정말 싫어하는데, 다른 템플릿 언어를 지원할 생각이 있나요? 음.. 태그가 지정된 템플릿 리터럴 / 하이퍼스크립트가 있군요. 이걸 사용해 볼까요?",
    "children": []
  }, {
    "depth": 3,
    "value": "시그널과 스토어는 언제 사용하나요? 어떤 차이가 있나요?",
    "children": []
  }, {
    "depth": 3,
    "value": "왜 Vue 처럼 Solid 스토어에 값을 할당할 수 없는건가요? Svelte 나 MobX? 양방향 바인딩은 어떻게 하나요?",
    "children": []
  }, {
    "depth": 3,
    "value": "Solid의 반응성을 단독으로 사용할 수 있나요?",
    "children": []
  }, {
    "depth": 3,
    "value": "Solid에는 Next.js 나 Material Components 같은 라이브러리가 있나요?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code",
    em: "em",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "자주하는-질문",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#자주하는-질문",
        children: "#"
      }), "자주하는 질문"]
    }), "\n", jsxs(_components.h3, {
      id: "가상-dom-을-사용하지-않는-jsx라구요-베이퍼웨어인가요-저명한-발언들에서-이건-불가능하다고-말하는-것을-들었습니다",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#가상-dom-을-사용하지-않는-jsx라구요-베이퍼웨어인가요-저명한-발언들에서-이건-불가능하다고-말하는-것을-들었습니다",
        children: "#"
      }), "가상 DOM 을 사용하지 않는 JSX라구요? 베이퍼웨어인가요? 저명한 발언들에서 이건 불가능하다고 말하는 것을 들었습니다."]
    }), "\n", jsx(_components.p, {
      children: "React의 업데이트 모델이 없으면 가능합니다. JSX는 Svelte나 Vue에 있는 것과 같은 템플릿 언어로, 어떤 면에서는 더 유연합니다. 임의의 자바스크립트를 삽입하는게 어려울 때도 있지만, 스프레드 연산자를 지원하는것과 별반 다르지 않습니다. 대답은 아니오: 이것은 베이퍼웨어가 아니라 가장 성능이 좋은것으로 입증된 접근 방식입니다."
    }), "\n", jsxs(_components.p, {
      children: ["진정한 이점은 확장 가능성에 있습니다. 컴파일러는 최적의 네이티브 DOM 업데이트를 제공하면서도 React와 같은 라이브러리의 모든 자유도를 가지고 있습니다. ", jsx(_components.a, {
        href: "https://ko.reactjs.org/docs/render-props.html",
        children: "render props"
      }), "나 고차 컴포넌트", "High order component", " 같은 기술을 사용하는 컴포넌트를 리액티브 \"Hook\"과 함께 쓸 수 있습니다. Solid의 제어 흐름 작동 방식이 마음에 들지 않는다면 직접 만들어 사용할 수 있습니다."]
    }), "\n", jsxs(_components.h3, {
      id: "solid는-얼마나-성능이-좋은가요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid는-얼마나-성능이-좋은가요",
        children: "#"
      }), "Solid는 얼마나 성능이 좋은가요?"]
    }), "\n", jsx(_components.p, {
      children: "뭔가 하나를 꼽을 수 있다면 좋겠지만, 실제로는 몇 가지 중요한 디자인상의 결정의 조합입니다:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "명시적인 Reactivity는 리액티브해야하는 항목만 추적합니다."
      }), "\n", jsx(_components.li, {
        children: "초기 생성을 고려하여 컴파일합니다. Solid는 휴리스틱 기술을 사용하고 올바른 표현식을 결합하여 계산 횟수를 줄이면서도, 중요한 업데이트를 세분화하여 성능을 유지합니다."
      }), "\n", jsxs(_components.li, {
        children: ["리액티브 표현식은 단순한 함수일 뿐입니다. 이렇게 하면 불필요한 래퍼와 동기화 오버헤드를 제거하면서 지연 props 평가를 사용해 \"사라지는 컴포넌트", "vanishing components", "\"를 가능하게 합니다."]
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "이것은 현재 Solid가 경쟁에서 우위를 점할 수 있도록 하는 고유한 기술 조합입니다."
    }), "\n", jsxs(_components.h3, {
      id: "react와-호환성이-있나요-아니면-react로-작성한-라이브러리를-solid에서-사용할-수-있나요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#react와-호환성이-있나요-아니면-react로-작성한-라이브러리를-solid에서-사용할-수-있나요",
        children: "#"
      }), "React와 호환성이 있나요? 아니면 React로 작성한 라이브러리를 Solid에서 사용할 수 있나요?"]
    }), "\n", jsx(_components.p, {
      children: "아니오. 그리고 앞으로도 불가능할 것입니다. API는 비슷하고, 컴포넌트는 약간의 편집으로 마이그레이션이 가능할 수 있지만, 업데이트 모델은 근본적으로 다릅니다. React 컴포넌트는 계속 렌더링되므로, Hook 외부의 코드는 아주 다르게 동작합니다. 클로저와 Hook 규칙은 Solid에서 불필요할 뿐만 아니라 여기에서는 작동하지 않는 코드를 규정할 수 있습니다."
    }), "\n", jsx(_components.p, {
      children: "반면에 현재 구현 계획은 없지만 Vue 호환은 가능할 것 같습니다."
    }), "\n", jsxs(_components.p, {
      children: ["반면에, Solid를 React 내에서 실행하는 것은 가능합니다. ", jsx(_components.a, {
        href: "https://github.com/solidjs/react-solid-state",
        children: "React Solid State"
      }), "를 사용하면 React 함수형 컴포넌트에서 Solid API에 접근 가능합니다. ", jsx(_components.a, {
        href: "https://github.com/Sawtaytoes/reactjs-solidjs-bridge",
        children: "reactjs-solidjs-bridge"
      }), "를 사용하면 React 컴포넌트를 Solid 컴포넌트 내에서 렌더링할 수 있으며, 반대도 가능합니다. 이는 애플리케이션을 점진적으로 포팅하고자 하는 경우 유용합니다."]
    }), "\n", jsxs(_components.h3, {
      id: "왜-템플릿에서-map을-사용할-수-없나요-for와-index의-차이점은-뭔가요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#왜-템플릿에서-map을-사용할-수-없나요-for와-index의-차이점은-뭔가요",
        children: "#"
      }), "왜 템플릿에서 ", jsx(_components.code, {
        children: "map"
      }), "을 사용할 수 없나요? ", jsx(_components.code, {
        children: "<For>"
      }), "와 ", jsx(_components.code, {
        children: "<Index>"
      }), "의 차이점은 뭔가요?"]
    }), "\n", jsxs(_components.p, {
      children: ["정적 배열의 경우 map을 사용하는데 아무 문제가 없습니다. 하지만 시그널이나 리액티브 프로퍼티에 대해 루프를 도는 경우, ", jsx(_components.code, {
        children: "map"
      }), "은 충분하지 않습니다: 배열이 어떤 이유로 변경된다면 ", jsx(_components.em, {
        children: "전체 map"
      }), " 은 다시 실행되며, 모든 노드가 다시 생성됩니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "<For>"
      }), " 와 ", jsx(_components.code, {
        children: "<Index>"
      }), "는 둘 다 이보다 더 똑똑한 루프 솔루션을 제공합니다. 각각의 렌더링된 노드는 배열의 엘리먼트에 매핑됩니다. 배열의 엘리먼트가 변경되면 매핑된 노드는 다시 렌더링됩니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "<Index>"
      }), " 는 이 작업을 ", jsx(_components.em, {
        children: "인덱스를 사용해"
      }), " 수행하며, 각 노드는 배열의 인덱스에 연결됩니다; ", jsx(_components.code, {
        children: "<For>"
      }), " 는 이 작업을 ", jsx(_components.em, {
        children: "값을 사용해"
      }), " 수행하며, 각 노드는 배열의 데이터 조각에 연결됩니다. 이 때문에 콜백에서 ", jsx(_components.code, {
        children: "<Index>"
      }), "가 항목에 대한 시그널을 제공하는 이유입니다. 각 항목의 인덱스는 고정된 것으로 간주되지만 해당 인덱스의 데이터는 변경될 수 있습니다. 반면에 ", jsx(_components.code, {
        children: "<For>"
      }), "는 인덱스에 대한 시그널을 제공합니다. 항목의 내용은 고정된 것으로 간주되지만 항목은 배열내에서 이동할 수 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: ["예를 들어, 배열의 두 요소가 바뀌면, ", jsx(_components.code, {
        children: "<For>"
      }), "는 연결된 두 DOM 노드의 위치를 변경하고 그 과정에서 ", jsx(_components.code, {
        children: "index()"
      }), " 시그널을 업데이트합니다. ", jsx(_components.code, {
        children: "<Index>"
      }), "는 DOM 노드의 위치를 변경하지 않지만, 두 DOM 노드에 대한 ", jsx(_components.code, {
        children: "item()"
      }), " 시그널을 업데이트하고 다시 렌더링하도록 합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["차이점에 대한 자세한 설명은 Ryan의 동영상에서 ", jsx(_components.a, {
        href: "https://www.youtube.com/watch?v=YxroH_MXuhw&t=2164s",
        children: "이 부분"
      }), "을 참고하세요."]
    }), "\n", jsxs(_components.h3, {
      id: "왜-props를-디스트럭처링하게-되면-반응성을-잃게-되나요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#왜-props를-디스트럭처링하게-되면-반응성을-잃게-되나요",
        children: "#"
      }), "왜 props를 디스트럭처링하게 되면 반응성을 잃게 되나요?"]
    }), "\n", jsx(_components.p, {
      children: "props 객체를 사용하면 프로퍼티 액세스를 추적하여 반응성이 활성화됩니다.\nJSX 표현식이나 이펙트와 같은 _추적 범위_내에서 프로퍼티에 액세스하면, 해당 프로퍼티가 변경될 때 JSX 표현식이 다시 렌더링되거나 이펙트가 다시 실행됩니다."
    }), "\n", jsx(_components.p, {
      children: "디스트럭처링을 하게 되면 객체의 프로퍼티에 액세스하게 됩니다. 이 작업이 추적 범위 밖에서 일어난다면, Solid는 코드를 다시 실행할 수 없게 됩니다."
    }), "\n", jsx(_components.p, {
      children: "다음 예제에서는 JSX 템플릿 내에서 프로퍼티 액세스가 발생했기 때문에, 시그널 변경시 이를 추적해 span 컨텐츠를 업데이트합니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BlueText"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"color: blue\""
            }), ">"]
          }), "{props.text}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          })]
        }), "\n  );\n}\n...\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "BlueText"
        }), " text={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}/>\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "하지만 다음 예제들은 템플릿 외부에서 프로퍼티에 액세스했기 때문에 span 텍스트가 업데이트되지 않습니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BlueText"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " text = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "text"
        }), ";\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"color: blue\""
            }), ">"]
          }), "{text}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          })]
        }), "\n  );\n}\n...\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "BlueText"
        }), " text={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}/>\n"]
      })
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BlueText"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "{text}"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"color: blue\""
            }), ">"]
          }), "{text}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          })]
        }), "\n  );\n}\n...\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "BlueText"
        }), " text={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mySignal"
        }), "()}/>\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["디스트럭쳐링 스타일을 선호한다면, 특정 스타일의 디스트럭쳐링을 사용해 리액티브하게 사용 가능한 두 종류의 서로 다른 Babel transform 이 있습니다: ", jsx(_components.a, {
        href: "https://github.com/orenelbaum/babel-plugin-solid-undestructure",
        children: "babel-plugin-solid-undestructure"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/LXSMNSYC/solid-labels/",
        children: "Solid Labels"
      }), "의 ", jsx(_components.a, {
        href: "https://github.com/LXSMNSYC/solid-labels/blob/main/docs/ctf.md#objects",
        children: "object features"
      }), "."]
    }), "\n", jsxs(_components.h3, {
      id: "왜-onchange-이벤트-핸들러가-제-때-호출되지-않는건가요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#왜-onchange-이벤트-핸들러가-제-때-호출되지-않는건가요",
        children: "#"
      }), "왜 ", jsx(_components.code, {
        children: "onChange"
      }), " 이벤트 핸들러가 제 때 호출되지 않는건가요?"]
    }), "\n", jsxs(_components.p, {
      children: ["일부 프레임워크에서는 입력에 대한 ", jsx(_components.code, {
        children: "onChange"
      }), " 이벤트가 수정되어, 키를 누를 때마다 발생합니다. 하지만 이는 ", jsx(_components.code, {
        children: "onChange"
      }), " 이벤트가 ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ko/docs/Web/API/GlobalEventHandlers/onchange",
        children: "네이티브하게 동작하는 방식"
      }), "이 아닙니다: ", jsx(_components.code, {
        children: "onChange"
      }), "는 입력창에 ", jsx(_components.em, {
        children: "커밋된"
      }), " 변경을 반영하기 위해서 사용되며, 일반적으로 입력창이 포커스를 잃으면 발생합니다. 입력 값에 대한 모든 변경 사항을 핸들링하려면 ", jsx(_components.code, {
        children: "onInput"
      }), "을 사용하세요."]
    }), "\n", jsxs(_components.h3, {
      id: "클래스-컴포넌트에-대한-지원을-추가할-수-있나요-라이프-사이클이-더-추론하기-쉽다고-생각합니다",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#클래스-컴포넌트에-대한-지원을-추가할-수-있나요-라이프-사이클이-더-추론하기-쉽다고-생각합니다",
        children: "#"
      }), "클래스 컴포넌트에 대한 지원을 추가할 수 있나요? 라이프 사이클이 더 추론하기 쉽다고 생각합니다."]
    }), "\n", jsx(_components.p, {
      children: "클래스 컴포넌트는 지원할 생각이 없습니다. Solid의 컴포넌트 라이프사이클은 리액티브 시스템의 스케줄링과 관련되어 있으며 인위적입니다. 클래스를 만들 수는 있지만, 사실상 이벤트 핸들러 이외의 코드는 render 함수를 포함해 생성자에서 실행됩니다. 이는 데이터를 덜 세분화하기 위한 변명을 위한 구문일 뿐입니다."
    }), "\n", jsx(_components.p, {
      children: "라이프사이클이 아니라 데이터와 동작을 함께 그룹화하세요. 이것은 수십년 동안 작동해온 리액티브의 모범 사례입니다."
    }), "\n", jsxs(_components.h3, {
      id: "jsx를-정말-싫어하는데-다른-템플릿-언어를-지원할-생각이-있나요-음-태그가-지정된-템플릿-리터럴--하이퍼스크립트가-있군요-이걸-사용해-볼까요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#jsx를-정말-싫어하는데-다른-템플릿-언어를-지원할-생각이-있나요-음-태그가-지정된-템플릿-리터럴--하이퍼스크립트가-있군요-이걸-사용해-볼까요",
        children: "#"
      }), "JSX를 정말 싫어하는데, 다른 템플릿 언어를 지원할 생각이 있나요? 음.. 태그가 지정된 템플릿 리터럴 / 하이퍼스크립트가 있군요. 이걸 사용해 볼까요?"]
    }), "\n", jsx(_components.p, {
      children: "우리는 Svelte가 템플릿을 사용하는 방식으로 JSX를 사용하여 최적화된 DOM 명령어를 생성합니다. 태그된 템플릿 리터널 및 하이퍼스크립트 솔루션은 그 자체로 매우 정말 훌륭하지만, 빌드를 하지 않아야하는 것과 같은 현실적인 요구사항이 없는 한 모든 측면에서 더 좋지 않습니다. 번들이 커지고, 성능이 저하되며, 수동으로 값을 래핑해야 합니다."
    }), "\n", jsx(_components.p, {
      children: "선택 사항이 있는 것은 좋지만, Solid의 JSX는 정말 최고의 솔루션입니다. 템플릿 DSL도 제한적이긴 하면서도 훌륭하지만, JSX는 많은 것을 무료로 제공합니다: 기존의 파서, 구문 강조 표시, prettier, 코드 완성, 그리고 TypeScript가 있습니다."
    }), "\n", jsx(_components.p, {
      children: "다른 라이브러리에서 이런 기능들에 대한 지원을 추가하고 있지만, 엄청난 노력이 필요하며 여전히 불완전하고 지속적인 유지보수에 어려움을 겪고 있습니다. 우리는 정말 현실적인 스탠스를 취하고 있습니다."
    }), "\n", jsxs(_components.h3, {
      id: "시그널과-스토어는-언제-사용하나요-어떤-차이가-있나요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#시그널과-스토어는-언제-사용하나요-어떤-차이가-있나요",
        children: "#"
      }), "시그널과 스토어는 언제 사용하나요? 어떤 차이가 있나요?"]
    }), "\n", jsx(_components.p, {
      children: "스토어는 중첩된 값을 자동으로 래핑므로 심층 데이터 구조와 모델과 같은 것에 적합합니다. 다른 대부분의 경우 시그널은 가볍고 훌륭하게 작업을 수행합니다."
    }), "\n", jsxs(_components.p, {
      children: ["우리가 이를 하나로 묶고 싶어도, 프리미티브를 프록시할 수 없으므로 이 경우 함수를 사용합니다. 함수는 가장 간단한 인터페이스이며 모든 리액티브 표현식(상태 액세스 포함)은 전송시 하나로 래핑될 수 있으므로 유니버설 API를 제공합니다. 시그널이나 상태에 원하는 이름을 지정할 수 있어 최소한의 기능에 머무를 수 있습니다. 최종 사용자에서 ", jsx(_components.code, {
        children: ".get()"
      }), " ", jsx(_components.code, {
        children: ".set()"
      }), " 입력을 강요하거나, 심지어 ", jsx(_components.code, {
        children: ".value"
      }), "를 입력하게 강요하는 것은 절대로 피하고 싶은 것입니다. 적어도 전자는 간결함을 위해 alias를 지정할 수 있지만, 후자는 함수를 호출하는 매우 간결하지 않은 방법입니다."]
    }), "\n", jsxs(_components.h3, {
      id: "왜-vue-처럼-solid-스토어에-값을-할당할-수-없는건가요-svelte-나-mobx-양방향-바인딩은-어떻게-하나요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#왜-vue-처럼-solid-스토어에-값을-할당할-수-없는건가요-svelte-나-mobx-양방향-바인딩은-어떻게-하나요",
        children: "#"
      }), "왜 Vue 처럼 Solid 스토어에 값을 할당할 수 없는건가요? Svelte 나 MobX? 양방향 바인딩은 어떻게 하나요?"]
    }), "\n", jsx(_components.p, {
      children: "반응성은 강력한 도구이지만 동시에 위험한 도구이기도 합니다. MobX 는 이를 알고 업데이트가 발생하는 위치/시기를 제한하는 Strict 모드와 Action을 도입했습니다. 데이터의 전체 컴포넌트 트리를 다루는 Solid에서는 React에서 무언가를 배울 수 있다는 것이 분명해졌습니다. 동일한 계약을 가질 수 있는 방법을 제공한다면 실제로 immutable일 필요는 없습니다."
    }), "\n", jsx(_components.p, {
      children: "상태 업데이트 기능을 전달할 수 있는지 여부는 상태를 전달할지 여부를 결정하는 것보다 훨씬 더 중요합니다. 따라서 이를 분리할 수 있는 것이 중요하며, 읽기가 immutable인 경우에만 가능합니다. 또한 세부적으로 업데이트할 수 있다면 immutable 사용 비용을 지불할 필요가 없습니다. 다행히도 ImmutableJS 와 Immer 사이에는 수많은 선행 기술이 있습니다. 아이러니하게도, Solid는 mutable한 내부와 immutable한 인터페이스를 사용해 리버스 Immer로 작동합니다."
    }), "\n", jsxs(_components.h3, {
      id: "solid의-반응성을-단독으로-사용할-수-있나요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid의-반응성을-단독으로-사용할-수-있나요",
        children: "#"
      }), "Solid의 반응성을 단독으로 사용할 수 있나요?"]
    }), "\n", jsxs(_components.p, {
      children: ["물론입니다. 독립된 패키지를 익스포트하지는 않았지만, 컴파일러 없는 Solid를 설치하고 리액티브 프리미티브를 사용하는 것은 간단합니다. 세분화된 반응성의 장점 중 하나는 라이브러리에 의존하지 않는다는 것입니다. 거의 대부분의 리액티브 라이브러리가 이런 식으로 작동합니다. 이것이 ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), "와 그 기초가 되는 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "DOM Expressions library"
      }), "가 처음부터 리액티브 시스템으로부터 렌더러를 만들도록 영감을 준 것입니다."]
    }), "\n", jsxs(_components.p, {
      children: ["시도해 볼 만한 몇 가지를 나열해 보면 ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/knockout/knockout",
        children: "Knockout"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelte"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/Riim/cellx",
        children: "CellX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue"
      }), " 등이 있습니다. 예를 들어, ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), "처럼 렌더러에 태그를 지정하는 것보다는 리액티브 라이브러리를 만드는데 훨씬 더 많은 시간이 필요하지만 감을 잡기에는 좋은 방법입니다."]
    }), "\n", jsxs(_components.h3, {
      id: "solid에는-nextjs-나-material-components-같은-라이브러리가-있나요",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid에는-nextjs-나-material-components-같은-라이브러리가-있나요",
        children: "#"
      }), "Solid에는 Next.js 나 Material Components 같은 라이브러리가 있나요?"]
    }), "\n", jsxs(_components.p, {
      children: ["Next.js 나 SvelteKit 과 유사한 ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), "이라는 SSR 스타터 솔루션을 개발중입니다."]
    }), "\n", jsxs(_components.p, {
      children: ["컴포넌트 라이브러리의 경우, Material을 위한 ", jsx(_components.a, {
        href: "https://suid.io/",
        children: "SUID"
      }), ", Chakra 와 유사한 ", jsx(_components.a, {
        href: "https://hope-ui.com/",
        children: "Hope UI"
      }), ", ", jsx(_components.a, {
        href: "https://solid-libs.github.io/solid-bootstrap/",
        children: "Solid Bootstrap"
      }), " 외에도 많은 라이브러리가 있습니다. ", jsx(_components.a, {
        href: "https://www.solidjs.com/ecosystem",
        children: "빠르게 성장중인 라이브러리와 도구 에코시스템"
      }), "을 참고해 보세요."]
    }), "\n", jsxs(_components.p, {
      children: ["에코시스템 도구 구축에 관심이 있다면, ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), "를 통해서 현재 에코시스템에 참여하거나 새로 만들 수도 있습니다."]
    })]
  });
}
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=faq-f89fb3f5.js.map
