Javascript
[JS] Import & Export
Import & Export
Module : 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 출처 : https://ko.javascript.info/modules-intro
React의 큰 장점도 컴포넌트를 하나하나 따로 관리할 수 있다는 점입니다. 하나의 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
댓글 0