코드 분할

코드 분할

---

• React의 코드 분할은 애플리케이션 번들을 작은 조각으로 나누는 기술입니다.
• 모던 웹으로 발전하면서 점점 DOM을 다루는 정도가 정교해지며 JavaScript 코드 자체가 방대해지고 무거워졌기 때문에, 개발자들은 번들을 나눈 뒤 필요한 코드만 불러오는 코드 분할을 선호하게 되었습니다.
• 코드 분할로 사용자가 애플리케이션을 로드할 때 필요한 최소한의 코드만 전송하고, 필요에 따라 추가 코드를 동적으로 로드할 수 있습니다. 
• 이러면 초기 로딩 시간을 줄이고 애플리케이션의 성능을 향상시키는 데 도움이 됩니다.
• 대표적인 예시로, 서드파티(Third Party) 라이브러리 사용할때 전부를 가져오는 것이 아니라 사용할 부분만 가져오는 방법이 있습니다.

/* 이렇게 lodash 라이브러리를 전체를 불러와서 그 안에 들은 메서드를 꺼내 쓰는 것은 비효율적입니다.*/
import _ from 'lodash';

_.find([]);

/* 이렇게 lodash의 메서드 중 하나를 불러와 쓰는 것이 앱의 성능에 더 좋습니다.*/
import find from 'lodash/find';

find([]);

 

 

 

Dynamic Import

---

• React는  SPA로, 사용하지 않는 모든 컴포넌트까지 한 번에 불러와 첫 화면이 렌더링 될 때까지의 시간이 오래 걸립니다.
• 때문에 컴포넌트는 나중에 불러오기 위해 코드 분할 개념으로 Dynamic Import를 도입했습니다.
• Dynamic Import는 JavaScript에서 모듈을 동적으로 불러오는 기능으로, 프로그램의 실행 중에 모듈을 필요할 때만 로드할 수 있습니다.
• 기존의 Static Import는 코드 파일의 가장 최상위에서 import 지시자를 사용해 사용하고자 하는 라이브러리 및 파일을 불러오는 방법을 사용했었습니다.
• 때문에 문서의 상위에 위치해야 했고, 블록문 안에서는 위치할 수 없는 제약 사항이 있었습니다.
• Dynamic import는 이런 문제를 해결하면서, 구문 분석 및 컴파일해야 하는 스크립트의 양을 최소화시킵니다.
• Dynamic import는 then 함수를 사용해 필요한 코드만 가져오고,가져온 코드에 대한 모든 호출은 해당 함수 내부에 있어야 합니다.
• 이 방식을 사용하면 번들링 시 분할된 코드(청크)를 지연 로딩시키거나 요청 시에 로딩할 수 있습니다.

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

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

실제로 사용 예는 아래와 같습니다.

 const loadButton = document.getElementById('loadButton');

      loadButton.addEventListener('click', async () => {
        // Dynamic Import를 사용하여 axios 라이브러리를 동적으로 로드합니다.
        const axios = await import('axios');

        // 로드된 모듈의 기능을 사용합니다.
        axios.get('https://api.example.com/data')
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      });

 

 

 

lazy와 Suspense

---

• React.lazy는 SPA의 단점을 해소하기위해 동적으로 컴포넌트를 로드하여 초기 렌더링 지연시간을 줄일 수 있습니다.
• Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할 때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 됩니다.
• Suspense는이런 로딩 시간을 처리하기 위한 컴포넌트로, 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여줍니다.
• React.lazy는 단독으로 사용이 불가능하며 반드시 Suspense 와 함께 사용해야 합니다.
• Supense 컴포넌트의 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 로딩 화면으로 보여줄 요소나 컴포넌트를 지정합니다.
• 보통 코드 중간보다는 진입단계인 Router에서 사용합니다.

import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);