React-loadable 을 통한 컴포넌트 비동기 렌더링

React-loadable 은 서버사이드 렌더링을 하게 되는 경우에 사용할 가치가 있는 라이브러리입니다. 물론, 나중에는 이전 섹션에 배운 React.lazy 와 Suspense 를 사용해도 서버사이드 렌더링을 제대로 할 수 있게 되겠지요. 그 때 까지는, React-loadable 을 사용하시면 적은 공수로 효율적인 개발을 할 수 있을 것입니다.

서버사이드 렌더링을 고려하지 않는다면 이 라이브러리는 사용하지 않아도 됩니다.

React-loadable 은, 기능이 더 많이 붙어있는 withSplitting 이라고 생각하시면 됩니다. React-loadable 에 붙어있는 주요 기능은 다음과 같습니다:

• 로딩중일때 보여줄 컴포넌트를 지정 할 수 있다.
• 로딩이 x초 이상 걸릴때만 로딩중 컴포넌트가 보여지게 할 수 있다 (불필요한 깜박임을 방지)
• 서버사이드 렌더링과 함께 사용시 유용한 함수들을 제공해준다.
• preload 함수를 사용하여 미리 불러올 수도 있다.

한번 사용해볼까요?

우선 react-loadable 을 설치하세요:

$ yarn add react-loadable

사용법은 우리가 기존에 배웠던 withSplitting 이나 React.lazy 랑 매우 유사합니다.

App 컴포넌트를 다음과 같이 작성해보세요:

src/App.js

import React, { Component } from 'react';
import Loadable from 'react-loadable';
import logo from './logo.svg';
import './App.css';

// 로딩중일때 보여줄 컴포넌트, 만약에 에러가 나면 error 값을 props 로 받음
const Loading = ({ error }) => {
  if (error) return <div>로딩 실패</div>;
  return <div>로딩중...</div>;
};

const SplitMe = Loadable({
  loader: () => import('./SplitMe'),
  loading: Loading, // 로딩중에 보여줄 컴포넌트 명시
  delay: 300 // 300ms 이상 걸릴때만 위 컴포넌트를 보여줌
});

class App extends Component {
  state = {
    visible: false
  };
  handleClick = () => {
    this.setState({
      visible: trufe
    });
  };
  render() {
    const { visible } = this.state;
    return (
      <div className="App">
        <img
          src={logo}
          className="App-logo"
          alt="logo"
          onClick={this.handleClick}
        />
        <p>Hello React!</p>
        {visible && <SplitMe />}
      </div>
    );
  }
}

export default App;

그럼, 이전과 똑같이 작동을 하게 될 것입니다.

잘 작동하는것을 확인하셨다면, 이번엔 preload 함수를 통해 Logo 쪽에 마우스가 진입하면 컴포넌트 로딩을 시작하도록 구현해보겠습니다. 실제 클릭 될 때까지는 렌더링되지 않고, 마우스가 진입 했을 때만 미리 불러와서 나중에 필요해질 때 로딩없이 바로 보여줄 수 있게 됩니다:

        <img
          src={logo}
          className="App-logo"
          alt="logo"
          onClick={this.handleClick}
          onMouseOver={SplitMe.preload}
        />

이제, 저장을 하시고, 브라우저로 페이지를 열어서 네트워크 탭을 열은 후, 로고쪽에 마우스를 댔을 때 컴포넌트 로딩이 이뤄지는지 확인해보세요.

잘 작동하나요? 아직까지는 우리가 서버사이드 렌더링을 배우지 않았기 때문에 이번에는 react-loadable 을 클라이언트에서 사용하는 용도로만 학습해보겠습니다. 실제 서버사이드렌더링에서 어떻게 사용하는지는 나중에 알아보도록 하겠습니다.

react-loadable 이 서버사이드렌더링을 어떻게 돕는지 궁금하시다면 이 섹션을 읽어주세요.