[React] React.lazy 와 React Router 라이브러리 사용방법

시작하기 전

내용이 많거나 큰 js 페이지를 전송할 때 저사양 장치를 사용 중이거나 저속 네트워크를 연결해서 로드되는 시간이 오래걸립니다. 이럴 때 필요한 것이 코드 분할입니다. 

React.lazy함수와 React-router-dom  라이브러리를 사용하면 Route 기반 코드 분할을 설정할 수 있습니다. 

지금부터 React.lazy함수와 React-router-dom  라이브러리에 대해 간략하게 알아보겠습니다.

(사용 방법을 잊지 않기 위해 매우 간략하게 기록했습니다. 자세한 내용은 참고 사이트에서 확인해주시면 감사하겠습니다.)

---

React-router-dom 설치

 

  1    React-router-dom 이란?

Router를 사용해서 페이지를 이용할 때 사용하는 라이브러리입니다.

 

  2   설치하는 방법

npm install react-router-dom --sav
yarn add react-router-dom

 

  3   설치완료 확인하는 방법

package.json 파일 > "dependencies" > "react-router-dom" 이 있는지 확인합니다.

"dependencies": {
  "react-router-dom": "^5.1.2",

이 글에서는 react-router-dom v5를 사용합니다.

v5와 v6은 라우터 사용에 있어서 차이가 있기 때문에 버전을 확인해주시기 바랍니다. 

 

---

React-router-dom 사용방법

 

  1   페이지 생성

ProductWrite.js 페이지입니다. 

...
const ProductWrite = () => {
...
}
export default ProductWrite;

 

  2    index.js 에 라우터 적용

App.js를 라우터로 감싸줍니다.

ReactDOM.render(
	<BrowserRouter>
    	<App />
	</BrowserRouter>
)

 

  3    App.js 에 라우터 적용

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import React, { useEffect, Suspense, lazy } from "react";
...
const productWrite = lazy(() => import("./components/product-write/ProductWrite"))
...

const App = (props) => {
	return (
    	<BreadcrumbsProvider>
        	<Router>
            	<Suspense
                  fallback={
                    <div className="flone-preloader-wrapper">
                      <div className="flone-preloader">
                        <span></span>
                        <span></span>
                      </div>
                    </div>
                  	}
              	>
                    <Switch>
                        <Route
                          path={process.env.PUBLIC_URL + "/productWrite"}
                          component={productWrite}
                        />
                     </Switch>
              </Router>
          </BreadcrumbsProvider>
      );
  };

 

1. React.lazy 함수

동적 import를 사용해서 컴포넌트를 랜더링 할 수 있습니다.

사용 전과 후를 비교하여 차이를 보겠습니다. 

• React.lazy 사용 전

import productWrite from './components/product-write/ProductWrite'

• React.lazy 사용 후

const productWrite = lazy(() => import("./components/product-write/ProductWrite"))

 

2. Suspense

Suspense는 컴포넌트가 읽어들이고 있는 데이터가 아직 준비되지 않았다고 React에 알려줄 수 있는, 데이터 불러오기 라이브러리에서 사용할 수 있는 메커니즘입니다.

---

Router에 내장된 컴포넌트들

 

  1    BrowserRouter

URL과 UI를 동기화해주는 라우터로 새로고침을 하지 않아도 주소 변경을 가능하게 합니다. 

 

  2    Switch

Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해줍니다.

  3    Route

컴포넌트에 path 속성을 이용하여 원하는 url를 지정합니다.

 

  4    Link

지정한 URL로 페이지 이동을 할 수 있도록 도와줍니다.  

 

참고한 사이트

https://velog.io/@hoon_dev/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0Route-Link-Switch-5

https://web.dev/i18n/ko/code-splitting-suspense/

https://ko.reactjs.org/docs/concurrent-mode-.html​

React.lazy 및 Suspense를 사용한 코드 분할