[REACT18]Code Spliting

react 18에서 바뀐 점

Warning: ReactDom.render is no longer supporte din React 18.

더이상 ReactDOM.render를 지원하지 않는다는 경고문

React 17

const rootElement = document.getElementById("root");
ReactDOM.render(<AppTest />, rootElement);

React 18(createRoot API)

import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(<App />);

---

코드 분할 (Code Spliting)

대부분의 React앱들은 Webpack같은 툴을 이용해 번들링을 하는데 모던 웹으로 발전하면서 DOM을 다루는 정도가 정교해지며 JavaScript 코드 자체가 방대해졌고, 따라서 특정 지점에서 코드를 해석하고 실행하는 정도가 느려지게 되었다.

코드 분할의 핵심은 어느 페이지에서 코드가 느려졌는지 파악, 번들을 나누고 지금 필요한 코드만 불러오는 것

---

번들 분할 혹은 줄이는 법

---

npm을 통해 다운 받는 서드파티 라이브러리는 플러그인이나 라이브러리 또는 프레임워크 등이 존재하며, 개발에 효율적이나 코드의 양이 많기 때문에 분할하는 것이 좋다.

e.g. lodash

/* lodash 전체가 아닌 필요한 find만 불러와서 사용 */
import find from "lodash/find";

find([]);

---

React에서의 코드 분할

React는 SPA(Single-Page-Application)인데, 모든 컴포넌트가 한번에 불려진다.

dynamic import(동적 불러오기)를 사용하여 코드 분할

기존의 Static Import에서는 import 구문은 문서의 상위에 위치, 블록문 안에서는 위치할 수 없는 제약

Dynamic Import

---

form.addEventListener("submit", (e) => {
  e.preventDefault();
  /* 동적 불러오기는 이런 식으로 코드의 중간에 불러올 수 있게 됩니다. */
  import("library.moduleA")
    .then((module) => module.default)
    .then(someFunction())
    .catch(handleError());
});

const someFunction = () => {
  /* moduleA를 여기서 사용합니다. */
};

• moduleA가 다른 곳에서 사용되지 않는 경우, 사용자가 form을 통해 양식을 제출한 경우에만 가져오도록
• then 함수를 사용해 필요한 코드만 가져옴
• 코드에 대한 모든 호출은 해당 함수 내부에
• 이 방식으로 번들링 시 분할된 코드(청크)를 지연 로딩시키거나 요청 시에 로딩 가능
• dynamic import는 React.lazy 와 함께 사용 가능