19.1 자바스크립트 함수 비동기 로딩

    컴포넌트 코드를 스플리팅하기에 앞서 일반 자바스크립트 함수를 스플리팅해 보겠습니다. src 디렉터리에 notify.js 파일을 생성하여 다음 함수를 작성해 보세요.

    notify.js

    export default function notify() {
      alert('안녕하세요!');
    }

     

    Hello React! 문구를 누르면 notify 함수가 실행되도록 App 컴포넌트를 수정합니다.

    src/App.js

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import notify from './notify';
    
    function App() {
      const onClick = () => {
        notify();
      };
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p onClick={onClick}>Hello React!</p>
          </header>
        </div>
      );
    }
    
    export default App;

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