TIL / 20210820

📌오늘한 일

리팩토링 리팩토링🔎

• React.lazy를 활용한 코드분할을 했다.

코드 분할을 도입하는 위치가 정해져있지는 않지만 우리는 라우트를 기반으로 코드분할을 했다. 웹 페이지를 불러오는 시간은 페이지 전환에 어느 정도 발생하며 대부분 페이지를 한번에 렌더링하기 때문에 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않기 때문이다.

const Main = lazy(() => import("./pages/Main"));
const Test = lazy(() => import("./pages/Test"));

const code = process.env.REACT_APP_VERSION_CODE;
function App(props) {
  return (
    <React.Fragment>
      <Suspense fallback={<LoaderWrap><Loader/></LoaderWrap>}>
        <ConnectedRouter history={history}>
            <Route path="/" exact component={Main}/>
            <Route path="/test" component={Test}/>
        </ConnectedRouter>
      </Suspense>
      <GlobalStyle/>
    </React.Fragment>   
  );
}

이런식의 lasy-suspense를 사용하여 코드분할을 해주었고,

fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들여 로딩 되는 기간동안 로더가 출력 되도록 했다.

📌 참고자료

suspense lazy : https://ko.reactjs.org/docs/code-splitting.html