text: import React, {useState, Suspense } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import loadable from '@loadable/component';
  
  const SplitMe = loadable(() => import('./SplitMe'), {
    fallback: <div>로딩...</div>
  });
  // const SplitMe = React.lazy(() => import('./SplitMe'));
  
  const App = () => {
    const [visible, setVisible] = useState(false);
    const onClick = () => {
      setVisible(true);
    };
    const onMouseOver = () => {
      SplitMe.preload();
    };
  
    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 />}
          {/* <Suspense fallback={<div>loading...</div>}>
            {visible && <SplitMe />}
          </Suspense> */}
        </header>
      </div>
    );
  };
  
  export default App;