컴포넌트 코드를 스플리팅하기에 앞서 일반 자바스크립트 함수를 스플리팅해 보겠습니다. 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;

---