App 컴포넌트를 클래스형 컴포넌트로 전환해 주세요. 그리고 handleClick 메서드를 만들고, 그 내부에서 SplitMe 컴포넌트를 불러와 state에 넣겠습니다. 또한, render 함수에서는 state 안에 있는 SplitMe가 유효하다면 SplitMe 컴포넌트를 렌더링해 주어야 합니다.

    App.js

    import React, { 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;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.