1. import

import를 이용해 외부 js파일의 내용을 사용할 수 있다.

// cal.js
function add(a, b) {
  return a + b;
}

const sub = (a, b) => a - b;

export { add, sub };

// Sample.js
import React from 'react';
import { add, sub } from './cal';

const Sample = () => {
  const a = add(1, 2);
  const b = sub(10, 4);

  return (
    <div>
      <div>
        {a}			// 3
      </div>
      <div>
        {b}			// 6
      </div>
    </div>
  );
};

export default Sample;

2. 동적 import

위 방법 말고도 동적으로 import를 사용할 수도 있다.

// Sample.js
import React from 'react';

const Sample = () => {
  import('./cal').then(cal => console.log(cal.add(1, 2)));		// 3
  import('./cal').then(cal => console.log(cal.sub(10, 4)));		// 6
 
  return (
    <div>
  
    </div>
  );
};

export default Sample;

동적 import를 사용법을 아직 제대로 익히진 못했지만 공식문서를 보니 이벤트 함수를 만들어서 사용하는 식으로 적용해야 되는 듯 하다.