[JS] 모듈 import, export

💡 분리된 파일들을 모듈(module)이라고 한다.

export(내보내기): 변수, 함수 앞에 붙이면 외부 모듈에서 사용이 가능하다.

Import(가져오기): 외부 모듈의 변수, 함수를 가져올 수 있다.

// food.js
export const likeFood = (food) => {
	console.log(`i like ${food}`);
}

// main.js
import {likeFood} from './food.js';
likeFood('fish'); // i like fish

export 분리

꼭 선언부 앞에 export를 붙이지 않아도 되고 맨 아래에서 사용해도 된다.

// food.js
const likeFood = (food) => {
	console.log(`i like ${food}`);
}

export {likeFood}; 

import *

아래와 같이 중괄호안에 넣어 가져올 수 있고 여러개를 넣어 가져올 수 있다.

// food.js
export const  likeFood = (food) => {
	console.log(`i like ${food}`);
}
export const  disLikeFood = (food) => {
	console.log(`i don't like ${food}`);
}

// main.js
import {likeFood, disLikeFood} from './food.js';
likeFood(fish) // i like fish
disLikeFood(fork) // i don't like fork

가져올게 너무 많다면 아래 처럼 import * as <obj> 객체 형태로 가져올 수 있어서 코드를 줄일 수 있다.

// main.js
import * as food from './food.js';
food.likeFood(fish) // i like fish
food.disLikeFood(fork) // i don't like fork

import as

as를 이용해서 가져온 모듈의 이름을 바꿔서 사용할 수 있다.

// main.js
import { likeFood as like} from './food.js';
like(fish) // i like fish

파일이 분리된 styled-components를 가져올 때 import *, import as 두개를 사용한다

// styled.js
import styled from 'styled-components';
export const Box = styled.div`
	width:100px; height: 100px;
`;

// index.js
import * as S from './styled';
const main = () => {
	return <S.Box/> ;
}

export as

가져와서 이름을 변경할 수 있지만 애초에 이름을 변경해서 내보낼 수도 있다.

// food.js
const likeFood = (food) => {
	console.log(`i like ${food}`);
}
export {likeFood as like};

// main.js
import {like} from './food.js';
like(fish) // i like fish

export default

export default는 모듈에 함수가 하나인 경우 사용 돼서 export default로 선언한다면 함수가 하나인 것을 명확히 나타낼 수 있다. 또한 import 시 중괄호가 필요없다. 주로 컴포넌트를 내보낼 때 많이 사용된다.

named export: 중괄호 필요, default export: 중괄호 불필요

// Auth.js
const  Auth = () => {...}
export default Auth;

// main.js
import Auth from './food.js';
<Auth/>

파일에 하나의 default export만 있기에 이름이 없이 내보내도 된다.

또 import시 as 필요없이 이름을 바꿔서 사용할 수 있지만 헷갈리기 쉽기에 파일 이름과 같은 이름으로 사용한다.

참고로 아래 코드 처럼도 사용해 내보낼 수도 있다.

// food.js
const likeFood = (food) => {
	console.log(`i like ${food}`);
}
export {likeFood as default}; 

느낀점

리액트를 배우고 나서 import, export를 정말 많이 사용했지만 정확한 개념을 알지 못했던 것 같다. 그래서 import as와 같이 변형된 형태를 볼 때 마다 궁금증을 갖었고 export와 export default의 차이도 정확히 몰랐지만 이번에 제대로 모듈을 파본거 같아 속이 후련하다. 이제 정확한 개념을 알았으니 잘 활용할 예정이다.