import / export 활용 파일간 모듈식 개발

JS 코드가 길어지면 다른 파일로 나눠서 사용을 하는게 좋은 관습입니다.

ES6에서 추가된 import와 export를 사용해서 원하는 변수 / 함수 / class를 선별해서 다른 파일로 보낼 수 있습니다.

⭐️Import 해온 것들은 사용은 가능하지만 수정은 불가(read-only)

예를 들어 index.html과 app.js를 생성해서

app.js 파일에 있는 내용을 index.html

(.js 파일 간에도 가능합니다.)

(index.html)

<script type="module">

</script>

HTML 파일 안에서 ES6 import 문법을 쓰려면 script 태그 안에 type을 module로 설정 해줘야합니다.

export default / import를 쓰면 다른 파일에 있는 변수 등을 가져다 쓸 수 있습니다(변수,함수,class 전부 가능)

(library.js)
(app.js)

let a = 10;
export default a;

------------------------
(index.html)

<script type="module">
  import a from 'app.js';
  console.log(a);
</script>

JS파일에서 특정한 변수를 다른 파일에서 이용가능하게 내보내고 싶으면 export default 변수명 이라고 하면 됩니다.

이제 변수를 가져다 사용하고 싶은 경우, 다른 파일에서 import 쓸거 from '경로' 로 설정하면 됩니다.

여러개도 export 할 수 있습니다.

JS파일에서 변수를 여러개 생성해서 전부 내보내고 싶으면 export를 여러번 쓰면 됩니다.

(library.js)
(app.js)

let a = 10;
let b = 20;
export {a, b};

------------------------
(index.html)

<script type="module">
  import {a,b} from 'app.js';
  console.log(a);
</script>

주의할 점은 export라고 쓸때는 export{변수명1, 변수명2 ...}이렇게 담아야 합니다 또는 export let a = 10;이렇게도 됩니다.

export로 내보낸 것들을 import 할때는 import {변수명, 변수명2...} from '경로' 이러한 방식으로 불러와야 합니다.