Import??? export?? 가 뭘까?

코딩을 공부하다보면 수많은 코드들에서 Import, export가 정말 많이 나온다. 이것들이 무엇이고 어떻게 활용할 수 있는지 정리해보자

 

Import

한 마디로 가져온다는 거다. 무엇을? export 한 것을.

 

Export

한 마디로 내보낸다는 거다. 무엇을? 내가 내보내고 싶은 것을.

 

코드로 간단하게 보자

 

//Math.js
export default function add(a, b) {
  return a + b;
}

Math.js에서 내가 add라는 함수를 다른 곳에서 사용하고 싶을 때 이렇게 export를 사용하면 된다. 여기서 default가 붙어 있는데 이것은 이 파일에서 기본으로 export하고 싶은 값을 사용하고 싶을 때 사용한다. export default는 파일 당 하나의 값만 보낼 수 있다. 

 

자 그러면 이 내보낸 것을 다른 파일에서 써야겠지?

 

//main.js
import sum from './math.js';

console.log(sum(4, 5)); // 9

 

export한 값을 Import를 사용해서 가져와서 사용하면 된다. 

 

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

Export는 여러개 할 수 있다.

 

import { add, subtract } from './math.js';

console.log(add(10, 5));     // 15
console.log(subtract(10, 5)); // 5

Import도 중괄호를 활용해서 여러 개를 한 번에 받을 수 있다.

만약 이름을 바꾸고 싶다면??

 

import { add as plus, subtract as minus } from './math.js';

console.log(plus(10, 5));  // 15
console.log(minus(10, 5)); // 5

이런 식으로 바꾸면 된다. 

 

또 Import를 활용해서 모든 내보낸 값을 한 번에 가져오는 방법도 있다. 

import * as math from './math.js';

console.log(math.add(10, 5));     // 15
console.log(math.subtract(10, 5)); // 5

 

모든 값을 가져와서 math라고 이름을 붙인디 객체를 사용하듯이 math.함수( ) 이런 식으로 활용이 가능하다.

 

React를 공부하다보면

import React from 'react';

export default function Button({ label }) {
  return <button>{label}</button>;
}

import React from 'react';
import Button from './components/Button';

function App() {
  return <Button label="Click me!" />;
}

export default App;

 

이런 식의 코드를 정말 많이 보게 된다. React 뿐만 아니라 Java, Spring 등 많이 언어와 프레임워크에서도 그냥 숨쉬듯 볼 수 있다.

 

이렇게 파일을 모듈화하면 코드가 더 깔끔해지고 유지보수가 쉬워짐으로 그냥 무조건 필수적으로 쓰고 알고 있어야한다.