[JS] Import & Export

Import & Export

Module : 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
출처 : https://ko.javascript.info/modules-intro

리액트를 가장 선호하는 이유도 컴포넌트 하나하나를 각각 관리할 수 있기 때문이에요.
기존에 script.js에서 어떻게 연결된지도 모르는 기능들을 좀 더 효율적으로 관리하기 위해서 파일들을 쪼개고 그에 해당하는 스크립트에 맞게 JSX도 따로 분리하여 가독성과 유지보수도 편리해졌어요.

js파일 하나하나가 모듈이에요 때문에 이 모듈들을 사용하기 위해서는 한 컴포넌트에서 다른 컴포넌트로 불러와야 하는데 이때 export와 import를 사용하는 것이에요.

1. Export 내보내기!

utill.js

// 여러 함수들을 내보내는 방법!

export function addBtn() {
	...
}
export const removeBtn = () => {
	...
}
export const listNum = 1;

==============================

function addBtn() {
	...
}
const removeBtn = () => {
	...
}
const listNum = 1;

export {addBtn , removeBtn , listNum}

//위에 코드와 같이 개별적으로 코드를 나눠줄수도 있고 아래와같이 선언한 후에 한번에 내보내는것도 가능해요!

membership.js

// 모듈 하나만 내보내는 방법!

const membershipLists = [
{
	name : '철수',
    age : 30
},
{
	name : '유리',
    age : 30
}
];

export default membershipLists
// export default는 한개의 기능 혹은 변수를 내보낼때 사용을 해요

2. import 가져오기!

app.js

import membershipLists from './membership' // 모듈 하나만 내보내기
import {addBtn , removeBtn , listNum} from './utill' // 모듈안에 함수 여러개 내보내기

console.log(membershipLists) // [{...},{...}]

console.log(addBtn) // 
ƒ addBtn() {
    console.log('sss');
}

console.log(listNum) // 1

reference

• [JavaScript] 모듈 export, import
• 모듈소개