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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "렌더링",
  "children": [{
    "depth": 2,
    "value": "JSX 컴파일",
    "children": []
  }, {
    "depth": 2,
    "value": "속성 및 Props",
    "children": []
  }, {
    "depth": 2,
    "value": "진입점",
    "children": []
  }, {
    "depth": 2,
    "value": "컴포넌트",
    "children": []
  }, {
    "depth": 2,
    "value": "Props",
    "children": []
  }, {
    "depth": 2,
    "value": "자식 컴포넌트",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    ul: "ul",
    li: "li",
    code: "code",
    pre: "pre",
    span: "span",
    blockquote: "blockquote",
    strong: "strong",
    em: "em"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "렌더링",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#렌더링",
        children: "#"
      }), "렌더링"]
    }), "\n", jsx(_components.p, {
      children: "Solid는 JSX, 태그가 지정된 템플릿 리터럴, Solid의 하이퍼스크립트 변형 이렇게 3가지 형식을 지원하며, 주로 JSX를 사용합니다. 그 이유는 JSX가 컴파일을 위해 만들어진 훌륭한 DSL이기 때문입니다. 명확한 문법을 가지며, 타입스크립트를 지원하고, Babel와 잘 작동하며, 코드 문법 하이라이팅 기능 및 prettier 등과 같은 도구를 지원합니다. 이 모든 것을 무료로 제공하는 도구들을 사용하는 것은 실용적이었습니다. 컴파일된 솔루션으로 훌륭한 DX를 제공합니다. 이렇게 널리 지원되는 것들을 사용할 수 있는데 굳이 커스텀 문법의 DSL을 사용해 어려움을 겪을 필요가 있을까요?"
    }), "\n", jsxs(_components.h2, {
      id: "jsx-컴파일",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#jsx-컴파일",
        children: "#"
      }), "JSX 컴파일"]
    }), "\n", jsx(_components.p, {
      children: "렌더링은 JSX 템플릿을 최적화된 네이티브 js 코드로 사전에 컴파일하는 것과 관련있습니다. JSX 코드는 다음을 생성합니다:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "인스턴스화 될 때마다 복제되는 템플릿 DOM 엘리먼트"
      }), "\n", jsx(_components.li, {
        children: "firstChild 와 nextSibling만 사용하는 일련의 참조 선언"
      }), "\n", jsx(_components.li, {
        children: "생성된 엘리먼트를 업데이트하기 위한 세분화된 계산"
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "이 방법은 document.createElement를 사용하여 엘리먼트를 하나씩 만드는 것보다 성능도 좋고 코드 양도 적습니다."
    }), "\n", jsxs(_components.h2, {
      id: "속성-및-props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#속성-및-props",
        children: "#"
      }), "속성 및 Props"]
    }), "\n", jsx(_components.p, {
      children: "Solid는 속성의 대소문자를 구분하지 않는 등 HTML 컨벤션을 최대한 따르려고 노력합니다."
    }), "\n", jsxs(_components.p, {
      children: ["네이티브 엘리먼트 JSX의 모든 속성의 대부분은 DOM 속성으로 설정됩니다. 정적 값들은 복제되는 템플릿에 직접 포함됩니다. 추가 기능을 제공하는 ", jsx(_components.code, {
        children: "class"
      }), ", ", jsx(_components.code, {
        children: "style"
      }), ", ", jsx(_components.code, {
        children: "value"
      }), ", ", jsx(_components.code, {
        children: "innerHTML"
      }), "과 같은 몇 가지 예외도 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: ["하지만, 커스텀 엘리먼트(네이티브 빌트인은 제외)는 동적인 경우 props가 기본값인데, 이는 더 복잡한 데이터 타입을 핸들링하기 때문입니다. ", jsx(_components.code, {
        children: "some-attr"
      }), "과 같은 표준 스네이크 케이스 속성 이름은 ", jsx(_components.code, {
        children: "someAttr"
      }), "과 같은 카멜 케이스로 변환합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["하지만, 네임스페이스 지시문을 사용해서 이 동작을 제어할 수 있습니다. 속성을 ", jsx(_components.code, {
        children: "attr:"
      }), "으로 강제하거나 property를 ", jsx(_components.code, {
        children: "prop:"
      }), "으로 강제할 수 있습니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<my-element ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "UniqACC"
        }), "={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "attr"
        }), ":title={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "title"
        }), "} />\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "참고:"
        }), " 정적 속성은 복제되는 html 템플릿의 일부로 만들어집니다. 고정 표현식과 동적 표현식은 JSX 바인딩 순서에 나중에 적용됩니다. 대부분의 DOM 엘리먼트에는 문제가 없지만, ", jsx(_components.code, {
          children: "type='range'"
        }), "를 가지는 input 엘리먼트와 같이 순서가 중요한 것도 있습니다. 엘리먼트를 바인딩할 때 이 점에 유의하세요."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "진입점",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#진입점",
        children: "#"
      }), "진입점"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid를 마운트하는 가장 쉬운 방법은 ", jsx(_components.code, {
        children: "solid-js/web"
      }), "에서 ", jsx(_components.code, {
        children: "render"
      }), "를 임포트하는 것입니다. ", jsx(_components.code, {
        children: "render"
      }), " 는 첫 번째 인자로 함수를, 두 번째 인자로 마운트할 컨테이너를 받으며, 언마운트 함수를 반환합니다. ", jsx(_components.code, {
        children: "render"
      }), " 함수는 자동으로 리액티브 루트를 생성하고 마운트 컨테이너로의 렌더링을 핸들링합니다. 최고의 성능을 위해서는 자식이 없는 엘리먼트를 사용하세요."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { render } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js/web\""
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"main\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsxs(_components.p, {
        children: [jsx(_components.strong, {
          children: "중요"
        }), " 첫 번째 인자는 함수여야 합니다. 그렇지 않으면 리액티브 시스템을 제대로 추적하고 스케줄할 수 없습니다. 함수 래퍼를 누락하게 되면 이펙트가 실행되지 않습니다."]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "컴포넌트",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#컴포넌트",
        children: "#"
      }), "컴포넌트"]
    }), "\n", jsx(_components.p, {
      children: "Solid에서 컴포넌트는 파스칼 케이스 이름을 가진 함수입니다. 첫 번째 인자는 props 객체이며, 실제 DOM 노드를 반환합니다."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello\""
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\r\n);\r\n\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    {props.children}\r\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\r\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "모든 JSX 노드는 실제 DOM 노드이므로, 최상위 레벨 컴포넌트의 유일한 책임은 이를 DOM에 추가하는 것입니다."
    }), "\n", jsxs(_components.h2, {
      id: "props",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#props",
        children: "#"
      }), "Props"]
    }), "\n", jsxs(_components.p, {
      children: ["React, Vue, Angular 및 기타 프레임워크와 마찬가지로, Solid는 컴포넌트에 property를 정의해서 데이터를 자식 컴포넌트로 전달할 수 있습니다. 아래 코드에서는 Parent가 \"Hello\" 문자열을 ", jsx(_components.code, {
        children: "greeting"
      }), " property를 통해 ", jsx(_components.code, {
        children: "Label"
      }), " 컴포넌트로 전달합니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello\""
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\r\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["위의 예제에서 ", jsx(_components.code, {
        children: "greeting"
      }), "에 정적 값이 지정되었지만, 동적 값도 설정할 수 있습니다. 예를 들면:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Parent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [greeting, setGreeting] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello\""
        }), ");\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\r\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "greeting"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{greeting()}"
            }), ">"]
          }), "\r\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "John", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "section"
            }), ">"]
          })]
        }), "\r\n  );\r\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["컴포넌트는 ", jsx(_components.code, {
        children: "props"
      }), " 인자를 통해 전달된 property에 접근할 수 있습니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => (\r\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.greeting}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n    {props.children}\r\n  ", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), "\r\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["다른 프레임워크와 달리, 컴포넌트의 ", jsx(_components.code, {
        children: "props"
      }), "에 대해서 디스트럭쳐링을 사용할 수 없습니다. ", jsx(_components.code, {
        children: "props"
      }), " 객체는 내부적으로 Object의 getter를 사용해 값을 지연 취득하기 때문입니다. 디스트럭쳐링을 사용하게 되면 ", jsx(_components.code, {
        children: "props"
      }), "의 반응성을 손상시키게 됩니다."]
    }), "\n", jsx(_components.p, {
      children: "다음 예제는 Solid에서 props에 접근하는 \"올바른\" 방법을 보여줍니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// `props.name` 은 예상한대로 업데이트됩니다."
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "다음 예제는 Solid에서 props에 접근하는 \"잘못된\" 방법을 보여줍니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// 잘못된 방법"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// `props.name`은 `name`으로 디스트럭쳐링 되었기 때문에 리액티브하지 않게 되면서, 값이 업데이트되지 않습니다."
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "{ name }"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "props 객체는 사용할 때는 일반 객체처럼 보이지만 (타입스크립트 사용자는 일반 객체처럼 타이핑된 것을 볼 수 있습니다), 실제로는 Signal과 유사한 리액티브 객체입니다. 여기에는 몇 가지 의미가 있습니다."
    }), "\n", jsx(_components.p, {
      children: "대부분의 JSX 프레임워크와 달리, Solid의 함수 컴포넌트는 (렌더링 사이클마다 실행되지 않고) 한 번만 실행되기 때문에 다음 예제는 예상대로 작동하지 않습니다."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\r\n\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Form"
        }), "(", jsx(_components.span, {
          className: "hljs-params"
        }), ") {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [value, setValue] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"\""
        }), ");\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\r\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "BasicComponent"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "value"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{value()}"
            }), " />"]
          }), "\r\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "type"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"text\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "oninput"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{(e)"
            }), " =>"]
          }), " setValue(e.currentTarget.value)} />\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\r\n  );\r\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["이 예제에서는 아마 ", jsx(_components.code, {
        children: "BasicComponent"
      }), "가 ", jsx(_components.code, {
        children: "input"
      }), "에 입력된 현재 값을 표시하고 싶었을 것입니다. 하지만, ", jsx(_components.code, {
        children: "BasicComponent"
      }), " 함수는 컴포넌트 생성시 한 번만 실행된다는 점을 기억해야 합니다. 처음 생성시, ", jsx(_components.code, {
        children: "props.value"
      }), " 는 ", jsx(_components.code, {
        children: "''"
      }), "입니다. 이는 ", jsx(_components.code, {
        children: "BasicComponent"
      }), "에 있는 ", jsx(_components.code, {
        children: "const value"
      }), "는 ", jsx(_components.code, {
        children: "'default'"
      }), "가 되며 절대로 업데이트되지 않음을 의미합니다. ", jsx(_components.code, {
        children: "props"
      }), " 객체는 리액티브하지만, ", jsx(_components.code, {
        children: "const value = props.value || 'default';"
      }), " 에서 props에 접근하는 것은 Solid의 관찰 범위를 벗어나므로, props가 변경되더라도 자동으로 재평가되지 않습니다."]
    }), "\n", jsx(_components.p, {
      children: "그렇다면 이 문제를 어떻게 해결해야 할까요?"
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "props"
      }), "를 Solid가 관찰할 수 있는 곳에서 접근해야 합니다. 일반적으로 JSX 내부 혹은 ", jsx(_components.code, {
        children: "createMemo"
      }), ", ", jsx(_components.code, {
        children: "createEffect"
      }), " 또는 thunk(", jsx(_components.code, {
        children: "() => ..."
      }), ")의 내부를 의미합니다. 여기서는 예상한대로 작동하는 솔루션 중 하나를 소개합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.value || \"default\"}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "이렇게하면, 함수로 호이스팅될 수 있습니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "value"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ";\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["또 다른 방법으로, 비용이 많이 드는 계산인 경우, ", jsx(_components.code, {
        children: "createMemo"
      }), "를 사용할 수 있습니다. 예를 들면:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "혹은 헬퍼 함수를 사용할 수 있습니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  props = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), " }, props);\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.value}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["참고로 다음 예제는 ", jsx(_components.em, {
        children: "작동하지 않습니다"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// 잘못됨"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "value"
        }), ": valueProp } = props;\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 잘못됨"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "BasicComponent"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " valueProp = props.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ";\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " value = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " valueProp || ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"default\""
        }), ");\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{value()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Solid의 컴포넌트는 성능의 중요한 부분입니다. Solid의 \"사라지는", "disappearing", "\" 컴포넌트 접근 방식은 지연된 props 평가를 통해 이루어집니다. props 표현식을 즉시 평가하고 값을 전달하는 대신, 자식 컴포넌트에서 props에 접근할 때까지 실행을 연기합니다. 이렇게 실행을 마지막 순간(일반적으로 DOM 바인딩 시점)까지 연기함으로써 성능을 극대화합니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " prop1=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"static\""
        }), " prop2={state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), "} />;\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 대략 다음과 같이 컴파일됩니다:"
        }), "\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 컴포넌트 바디를 untrack 함으로써 격리와 함께 값비싼 업데이트를 방지합니다."
        }), "\r\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "untrack"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), "\r\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "({\r\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop1"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"static\""
        }), ",\r\n    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 동적 표현식"
        }), "\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "get"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "prop2"
        }), "() {\r\n      ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " state.", jsx(_components.span, {
          className: "hljs-property",
          children: "dynamic"
        }), ";\r\n    },\r\n  })\r\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "반응성을 유지하기 위해 Solid는 몇가지 props 헬퍼를 제공합니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// 디폴트 props"
        }), "\r\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Smith\""
        }), " }, props);\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// props 복제"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " newProps = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props);\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// props 병합"
        }), "\r\nprops = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "(props, otherProps);\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// props를 여러개의 props 객체로 분할"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [local, others] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "splitProps"
        }), "(props, [", jsx(_components.span, {
          className: "hljs-string",
          children: "\"class\""
        }), "])\r\n<div {...others} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), "={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "cx"
        }), "(local.", jsx(_components.span, {
          className: "hljs-property",
          children: "class"
        }), ", theme.", jsx(_components.span, {
          className: "hljs-property",
          children: "component"
        }), ")} />\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "자식-컴포넌트",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#자식-컴포넌트",
        children: "#"
      }), "자식 컴포넌트"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 JSX 자식들을 React와 유사하게 처리합니다. 단일 자식은 ", jsx(_components.code, {
        children: "props.children"
      }), "의 단일 값이고, 여러 자식들은 값 배열을 통해 처리됩니다. 일반적으로 자식들을 JSX 뷰에 전달합니다. 그러나 자식들과의 인터랙션이 필요한 경우, 다운 스트림 제어 흐름을 해결하고 Memo를 반환하는 ", jsx(_components.code, {
        children: "children"
      }), " 헬퍼를 사용하는 것이 좋습니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// 단일 자식"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Label"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "class"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"label\""
            }), ">"]
          }), "Hi, { props.children }", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\r\n\r\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), "Josie", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "span"
            }), ">"]
          }), jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          })]
        }), "\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 여러 자식들"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{props.children}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\r\n\r\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "First", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "\r\n  {state.expression}\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "Judith", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Label"
            }), ">"]
          }), "\r\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "List"
            }), ">"]
          })]
        }), "\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 자식들 매핑"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{props.children}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\r\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 헬퍼를 사용해 자식들을 변경하고 매핑"
        }), "\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "List"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") => {\r\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// children 헬퍼는 값들을 메모아이즈하고, 모든 중간의 반응성을 해결합니다."
        }), "\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " memo = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " props.", jsx(_components.span, {
          className: "hljs-property",
          children: "children"
        }), ");\r\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " children = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "memo"
        }), "();\r\n    children.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "forEach"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "c"
          }), ") =>"]
        }), " c.", jsx(_components.span, {
          className: "hljs-property",
          children: "classList"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"list-child\""
        }), "))\r\n  })\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          }), "\r\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "each"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{memo()}"
            }), ">"]
          }), "{item => ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "{item}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "li"
            }), ">"]
          }), "}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "For"
            }), ">"]
          }), "\r\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "ul"
            }), ">"]
          })]
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "중요함:"
      }), " Solid는 자식 태그들을 비싼 표현식으로 취급하고, 동적 리액티브 표현식과 같은 방식으로 래핑합니다. 즉, ", jsx(_components.code, {
        children: "props"
      }), " 접근에 대해 지연 평가한다는 것을 의미합니다. 뷰에서 사용하기 전에 여러 번 접근하거나 디스트럭쳐링할 때 주의해야 합니다. 이는 Solid가 미리 가상 DOM 노드를 만들어 비교할 수 있는 사치를 누릴 수 없기 때문에, ", jsx(_components.code, {
        children: "props"
      }), "의 값에 대한 접근은 지연시키고 신중하게 해야합니다. 이를 위해서는 메모아이즈를 사용하는 ", jsx(_components.code, {
        children: "children"
      }), " 헬퍼를 사용하세요."]
    })]
  });
}
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=rendering-200fccbb.js.map
