더북(TheBook)

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;

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