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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "저장소는 Solid의 Store 프록시를 사용해 Solid에서 가장 자주 생성됩니다.\n때로는 Redux, Apollo, XState와 같은 변경 불가능한 라이브러리와 인터페이스하고 싶은 경우가 있으며, 이에 대해 세분화된 업데이트를 수행해야 합니다."
    }), "\n", jsxs(_components.p, {
      children: ["이 예제에서 Redux에 대한 기본적인 래퍼를 ", jsx(_components.code, {
        children: "useRedux.tsx"
      }), " 파일에 구현했습니다. Store와 액션은 나머지 파일에 정의되어 있습니다."]
    }), "\n", jsx(_components.p, {
      children: "핵심 동작은 Store 객체를 생성하고, 업데이트시 상태를 업데이트하기 위해 Redux 저장소를 구독한다는 것입니다."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "());\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " unsubscribe = store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "subscribe"
        }), "(\n  ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "())\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "데모에서 아이템을 추가하고, 추가한 아이템을 체크해 보면 잘 작동하는 것처럼 보입니다.\n하지만 추가 시점과 체크박스를 체크하는 시점에 console.log 를 확인해보면 렌더링이 비효율적이라는 것을 알 수 있습니다."
    }), "\n", jsx(_components.p, {
      children: "이는 Solid가 기본적으로 diff를 사용하지 않기 때문에, 새 아이템을 새 것으로 가정하고 교체합니다.\n데이터 변경이 세분화된다면 diff가 필요 없게 됩니다만, 이를 위해서는 어떻게 하면 될까요?"
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 ", jsx(_components.code, {
        children: "setStore"
      }), " 호출을 향상시키고, 변경 불가능한 소스의 데이터를 비교해서 세분화된 업데이트만 알려주는 ", jsx(_components.code, {
        children: "reconcile"
      }), "이라는 diffing 메서드를 제공합니다."]
    }), "\n", jsx(_components.p, {
      children: "해당 코드를 다음과 같이 변경해 보겠습니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [state, setState] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "());\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " unsubscribe = store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "subscribe"
        }), "(\n  ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setState"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "reconcile"
        }), "(store.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getState"
        }), "()))\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "이제 예제는 예상대로 동작하며, 생성시에만 생성 코드를 실행합니다."
    }), "\n", jsxs(_components.p, {
      children: ["이것만이 이 문제를 해결하는 유일한 방법은 아니며, 일부 프레임워크에서는 루프안에서 ", jsx(_components.code, {
        children: "key"
      }), " 프로퍼티를 사용하기도 합니다.\n문제는 이를 템플릿의 기본 부분으로 만들게 되면, 항상 리스트 조정을 실행해야 하며, 컴파일된 프레임워크에서도 잠재적인 하위 항목의 변경에 대해서 항상 diff를 수행해야 한다는 점입니다.\n데이터 중심 접근 방식은 이를 템플릿 외부에 적용할 수 있을 뿐만 아니라 선택적으로 사용할 수 있게 만듭니다.\n내부 상태 관리에 이것이 필요없다고 생각이 들면, 이는 기본적으로 최상의 성능을 유지하는고 있다는 것을 의미합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["물론, 필요할 때 ", jsx(_components.code, {
        children: "reconcile"
      }), "을 사용하는 것은 문제가 없습니다.\n때로는 간단한 reducer가 데이터 업데이트를 구성하는 좋은 방법이 됩니다.\n", jsx(_components.code, {
        children: "reconcile"
      }), "은 여기에서 빛을 발하여, 커스텀 ", jsx(_components.code, {
        children: "useReducer"
      }), " 프리미티브를 만들게 됩니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useReducer"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "reducer, state"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [store, setStore] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "(state);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "dispatch"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "action"
        }), ") => {\n    state = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "reducer"
        }), "(state, action);\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setStore"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "reconcile"
        }), "(state));\n  }\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [store, dispatch];\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "reconcile"
      }), " 동작은 설정 가능합니다. 커스텀 ", jsx(_components.code, {
        children: "key"
      }), "를 설정할 수 있으며, 객체의 레퍼런스를 비교하는 대신 말단 노드의 값을 비교하는 ", jsx(_components.code, {
        children: "merge"
      }), " 옵션이 있습니다."]
    })]
  });
}
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=lesson-79a71249.js.map
