export vs import

😄 모듈?

하나의 js파일에 모든 코드를 작성한다고 생각해보자
당연히 엄청 길어지고 가독성도 떨어질 것이다.
이걸 해결하기 위해서 하나의 js파일을 여러개의 js파일들로 쪼개고 분리해서 가독성도 좋아지고 유지보수도 편리하게 할 수 있도록 하는 것이다.
즉 js 파일 하나하나가 모듈이 되는 것이다.
그래서 이렇게 분리한 여러 모듈들을 사용하기 위해서는 한 컴포넌트에서 다른 컴포넌트로 내보내고 불러와야하는데 이 때 사용하는 것이 export와 import이다.

😄 code 1. export

export

• named export라고 한다
  
  
• 한 파일 내에서 여러개의 변수, 클래스, 함수 등등을 내보낼 수 있다
  
  
• export로 내보낸걸 import할 시 중괄호 {} 사용해야한다
  
  
• named export 사용시 내보내기나 가져오기 할 때 사용할 이름이 동일해야한다

/* named export */
export const Message = '123'

/* import */
import { Message } from './game.js';

• 위의 코드는 named export이다

• 가져오기 할 때 내보내기 한 이름과 동일해야 한다

• 중괄호 {} 사용해야 한다

😄 code 2. export default

export default

• 하나의 파일에서 단 한개의 변수 또는 클래스 등만 내보낼 수 있다
  
  
• 내보내기 할 때 이름과 가져오기 할 때 이름이 달라도 상관 없다
  (개인적인 생각으로는 어차피 파일당 한개만 내보낼 수 있으니까 이름이 달라도 상관 없는 것 같다)
  
  
• 중괄호 {} 없이 가져올 수 있다

/* export default */
export default class Game { /* 생략 */ }

/* import */
import GameBuilder from './game.js';

• 위의 코드는 export default이다

• 중괄호 {} 생략 가능하다

• var, let, const는 바로 export default 사용시 에러 난다
  ex) export default const Message = '123' (에러!)

• import시 export default한 이름과 달라도 상관 없다

필수사항은 아니지만 하나의 모듈에는 named export나 default export중 하나로 통일하는 것이 좋다

😄 code 3. import

import

• 내보내기한걸 가져오고 싶을 때 사용
  
  
• as를 사용하면 이름을 바꿔서 가져올 수 있다
  
  
• export 또한 이름 바꿔서 내보낼 수 있다

/* 이름 바꿔서 import 하기 */
import {sayHello as hello}

/* 이름 바꿔서 export 하기 */
export {sayHello as hello};

React 공부하면서 알게 된 것들 추가

• css 파일 import시 확장자명 붙여야한다
  ex) import './app.css';
  
  
• .js나 .jsx는 확장자 생략이 가능하다
  ex) import App from './app';
  -> webpack이 자동으로 처리해주기 때문

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍