[Javascript] 모듈 export, import

 

리액트를 사용하다보면 import & export는 가장 필수적으로 알아야할 문법이다.

하지만 이런 문법들을 처음사용해보면 많이 어색할 수 있어 내용을 정리해보았다.

---

1.모듈이란?

모듈은 마치 레고의 한조각이다. 리액트가 제일 최적화된 프로그램으로 인식되는 것이 바로 컴포넌트를 하나하나 

각각 관리할 수 있기 때문이다.

 

과거 Vanila Javascript(바닐라 자바스크립트)로 처음 자바스크립트를 접했을때를 생각해보면, 

script.js하나로 수 많은 html 파일의 스크립트 로직을 짯던 기억이 있을 텐데

 

어떻게 연결 돼어 있는지 읽기조차 힘든 긴 script.js하나로 여러개 모듈로 연결해 쪼개고, 해당 스크립트에 적용하는 

jsx도 따로 분리해 가독성도 유지보수도 편리해진 것이다.

 

js파 하나하나가 모듈이다. 때문에 이 모듈들을 사용하기 위해서는 한 컴포넌트에서 다른 컴포넌트로 불러와주어야 

하는데 이때 export & import를 사용하는 것이다.

---

Export 하는법 

모듈 하나하나 다른 모듈에서도 이용할 수 있도록 내보내려면 export를 해주어야한다.

export에는 크게 두 가지 방법이 있는데

하나는 해당 모듈에서 딱 하나만 내보내는방법

다른 하나는 모듈 내 여러 함수들을 내보내는방법이 있다.

 

하나만 내보내는 방법은 리액트에서 자주 접했을 export default이다.

const person = () => {
    return (
        <div>
        </div>
    )
}

export default person;	//이 파일에는 person이라는 이름의 유일한 모듈 하나만 export 할 수 있다.

 

여러 함수를 내보내는 방법은 아래와 같이 이용해준다.

이를 named export(한 파일 내에서 여러 변수/class 등의 export)라고도 불린다.

export function person(user) {
   console.log(`Hello, ${user}!`);
}


export function name(user) {
   console.log(`I'm ${user}!`);
}

export를 중복해서 사용하지 않고 한번에 내보내고 싶다면 아래 방법처럼 이용한다.

 

function person(user) {
  console.log(`Hello, ${user}!`);
}

function name(user) {
  console.log(`Hello, ${user}!`);
}


export {person, name};

---

Import 하기 

import 규칙은 default export와 named export가 각각 다르다.

 

default export는 해당 모듈에 유일한 모듈이기 떄문에 export할때 굳이 이름을 사용하지않고 다른 이름으로 바꿔주어도 된다. 하지만 코딩 컨벤션 상, 혼란을 방지해주기 위해서는 그대로 사용하는 것이 좋은 편이다.

 

named export는 해당 모듈에 여러 모듈 중 하나 이기 떄문에 export 했을 때 정해준 이름 그대로 사용해야한다. 이는

default export처럼 이름을 바꿔 import한다면 오류가 발생한다.

또한 중괄호를 포함해서 사용해야한다.

 

import person from './person.js'	//exported as default
import {person, name} from './person.js'	//export as named modules

 하지만 name export의 이름을 바꿔서 import시키고 싶다면 'as'를 사용하면 된다.

import {person as me, name as kim} from './persons.js'

여러가지 named export를 한번에 import 시키고 싶다면 '*'를 사용하면 된다.

CSS 스타일링할 때 모든 요소를 포함시킬때 많이 사용해 보았을 것이다.

 

꺼내서 쓰고 싶다면,export시킨 각각의 이름을 사용하면 된다.

import * as me from './person.js'

me.person('Kim');
me.name('kim')

 

참고 자료

[JavaScript] 모듈 export, import