React) 19장 코드 스플리팅 ( React.lazy-Suspense, loadable_component )

코드 스필리팅?

정의 : 싱글 페이지 에플리케이션(SPA)와 같이 용량이 커지면 페이지 로딩 속도가 느려지는 환경에서

         특정 상황에서 특정 코드를 불러오기 위해 미리 코드를 분리하는 작업

 

코드 스플리팅으로 얻는 이점은 다음과 같다.

1. 불필요한 주석, 경고 메시지, 공백등을 제거하여 파일을 최소화
2. 브라우저에서 JSX 문법이나 다른 최신 JS 문법이 원활히 실행되도록 트랜스 파일 작업을 함
3. 이미지와 같은 정적 파일이 있다면 해당 파일을 위한 경로 설정

→위의 이점을 얻는 작업은 webpack이 해준다.

웹팩에 별도 설정을 하지 않으면 프로젝트에서 사용중인 모든 JS와 CSS파일이 하나의 파일로 합쳐진다.

 

 

또한, 파일을 빌드하면 파일명에 해시(hash) 값이 포함되어있다.

이 값은 빌드 과정에서 해당 파일의 내용에 따라 생성되며,

이를 통해 브라우저가 새로운 파일을 받아야 될지 말지를 알 수 있다.

→main으로 시작하는 파일은 직접 프로젝트에 작성하는 App같은 컴포넌트에 대한 코드가 들어있고,

  숫자로 시작하는 파일에는 React, React-DOM, 등 node_modules에서 불러온 라이브러리 관련 코드가

  들어있다.

 

 

일반 Javascript 함수 비동기 로딩

일반 JS 함수 스플리팅은 import() 함수를 이용하면 된다.

import { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component{
  state = {
    SplitMe: null
  };
  handleClick = async () => {
    const loadedModule = await import('./SplitMe');
    this.setState({
      SplitMe: loadedModule.default
    });
  };
  render() {
    const { SplitMe } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p onClick={this.handleClick}>Hello React</p>
          {SplitMe && <SplitMe />}
        </header>
      </div>
    )
  }
}

export default App;

import() 함수는 Promise를 반환한다.

모듈을 불러올 때는 default로 내보낸 것은 result.default를 참조해야 사용 가능하다.

 

 

 

React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅

• React.lazy는 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해주는 유틸함수이다.
• Suspense는 리액트 내장 컴포넌트로 코드 스플리팅된 컴포넌트를 로딩할 수 있게 발동 시킬 수 있고,
  로딩중에 UI를 보여줄 수 있다.

import logo from './logo.svg';
import './App.css';
import React, { useState, Suspense } from 'react';  // 책에서는 React를 import 하지 않았지만 실제 해보니 import해주지 않으면 동작을 안한다.
const SplitMe = React.lazy(() => import('./SplitMe'));

const App = () => {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React</p>
        <Suspense fallback={<div>loading...</div>}>
          {visible&&<SplitMe />}
        </Suspense>
      </header>
    </div>
  )
}

export default App;

Suspanse의 fallback props로 로딩중에 보여줄 JSX 설정이 가능하다.

 

 

 

Loadable Components 를 통한 코드 스플리팅

loadable components 라이브러리를 이용하면 코드 스플리팅이 편해진다.

 

이 라이브러리의 이점은 서버 사이드 렌더링을 지원하는 점이다. ( React.lazy와 Suspense는 지원하지 않는다 )

( React.lazy와 Suspense도 React 18 부터 지원한다. )

Server Side Rendering ( SSR ) 이란?
서버측에서 웹 초기 렌더링을 처리하여 사용자에게 보내는 방식이다.
장점 : 초기 로딩 속도가 빠르고, 케싱 및 검색 엔진 최적화가 가능하다.
단점 : 프로젝트의 복잡도가 높고, 서버 렌더링에 따른 부하 발생, 페이지 이동시 깜빡거림

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import loadable from '@loadable/component'
const SplitMe = loadable(() => import('./SplitMe'), {
  fallback: <div>loading...</div>
}); //  loadable 함수의 두번째 파라미터에는 속성을 넣을 수 있다. 
    //  https://loadable-components.com/docs/api-loadable-component/

const App = () => {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  const onMouseOver = () => {
    SplitMe.preload();
  };  //  커서가 올라가면 preload()로 미리 로딩되게 함
      //  preload()외에 다른 기능들이 있음 (공식문서 확인 https://loadable-components.com/docs/getting-started/)
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick} onMouseOver={onMouseOver}>Hello React</p>
        {visible&&<SplitMe />}
      </header>
    </div>
  )
}

export default App;​

 

 

 

 

지금까지 코드 스플리팅에 대해 알아보았고,

loadable-components 라이브러리의 편리함을 알게된 이상

이 라이브러리를 사용할 것이다....

물론 다른 기술들의 사용방법 또한 익힐것 이지만 라이브러리에 중점을 맞출것이다...