S4) Unit 4. [React] React의 기능

📣  코드 분할

𝟭. 코드 분할이란?

✔️ 런타임 시 여러 번들을 동적으로 만들고 불러오는 것

➰ 당장 필요한 코드가 아니라면 따로 분리를 시키고, 나중에 필요할 때 불러와서 사용할 수 있게 한다.

➰ Webpack, Rollup과 같은 번들러가 지원하는 기능

➰ 페이지의 로딩 속도를 개선할 수 있다.

 

𝟮. 번들 분할 혹은 줄이는 법

✔️ 번들링 되는 파일에 npm을 통해 다운받는 것에는 서드파티 라이브러리가 포함되는데 이를 따로 따로 불러와서 사용할 수 있게 한다.

➰ 서드파티 라이브러리 : 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리로, 즉 제 3자 라이브러리

    ㄴ 플러그인이나 라이브러리 또는 프레임워크 등이 존재하며, 이 라이브러리를 잘 사용하면 편하고 효율적인 개발을 할 수 있다.

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

...

_.find([]);

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

find([]);

➰ lodash라는 라이브러리는 하나의 폴더와 같고, 그 폴더 안에는 개발 시 다양한 상황에 쓰기 좋은 메소드들, 즉 함수 코드들이 들어 있다.

➰ 필요한 것 한두 개만 가져다 쓰는 식으로 개발하는 것이 훨씬 좋다.

---

📣  리액트에서의 코드 분할

✔️ 리액트는 SPA로 사용하지 않는 모든 컴포넌트까지 불러오기 때문에, 사용하지 않는 컴포넌트는 나중에 불러오기 위해 이 개념을 도입했다 => 동적 불러오기

 

𝟭. 정적 불러오기(static import)

/* 기존에는 파일의 최상위에서 import 지시자를 이용해 라이브러리 및 파일을 불러왔습니다. */
import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  /* 그리고 코드 중간에서 불러온 파일을 사용했습니다. */
}

➰ import 구문은 문서의 상위에 위치하고, 블록문 안에서는 위치할 수 없다.

 

𝟮. 동적 불러오기(dynamic import)

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

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

➰ 사용자가 form 양식을 제출한 경우에만 moduleA를 가져올 수 있게 한다.

➰ then 함수를 사용해서 필요한 코드만 가져오며, 가져온 코드에 대한 모든 호출은 해당 함수 내부에 있어야 한다.

➰ React.lazy 와 함께 사용할 수 있다.

---

📣  React.lazy()와 Suspense

𝟭. React.lazy()

✔️ react.lazy() 함수를 사용하면 동적 불러오기를 사용해 컴포넌트를 렌더링할 수 있다.

➰ 컴포넌트를 동적으로 import 할 수 있기 때문에 초기 렌더링 지연시간을 줄일 수 있다.

import Component from './Component';

/* React.lazy로 dynamic import를 감쌉니다. */
const Component = React.lazy(() => import('./Component'));

➰ React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 한다.

 

𝟮. React.Suspense

✔️ 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능

➰ lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생긴다.

/* suspense 기능을 사용하기 위해서는 import 해와야 합니다. */
import { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
       {/* 이런 식으로 React.lazy로 감싼 컴포넌트를 Suspense 컴포넌트의 하위에 렌더링합니다. */}
        <Suspense fallback={<div>Loading...</div>}>
        {/* Suspense 컴포넌트 하위에 여러 개의 lazy 컴포넌트를 렌더링시킬 수 있습니다. */}
            <OtherComponent />
            <AnotherComponent />
      </Suspense>
    </div>
  );
}

➰ Supense 컴포넌트의 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 로딩 화면으로 보여줄 React 엘리먼트를 받는다.

➰ Suspense 컴포넌트 하나로 여러 개의 lazy 컴포넌트를 보여줄 수 있다.

 

𝟯. React.lazy와 Suspense의 적용

✔️ 중간에 적용시키는 것보다는 웹 페이지를 불러오고 진입하는 단계인 Route에 이 두 기능을 적용시키는 것이 좋다.

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>
);

➰ 라우터에 Suspense를 적용하는 것 

    ㄴ 라우터가 분기되는 컴포넌트에서 각 컴포넌트에 React.lazy를 사용하여 import한다.

    ㄴ Route 컴포넌트들을 Suspense로 감싼 후 로딩 화면으로 사용할 컴포넌트를 fallback 속성으로 설정해준다.

    ㄴ 초기 렌더링 시간이 줄어드는 장점이 있으나 페이지를 이동하는 과정마다 로딩 화면이 보여진다.