Import&Export

p-q·2021년 9월 30일
0

JavaScript

목록 보기
7/11

import와 export는 자바스크립트의 코드를 모듈화 할 수 있는 기능이다.

모듈화의 필요성

기본적으로 자바스크립트의 유효 범위는 전역으로 시작한다.

<!-- index.html -->
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script>
    getTotal(); // 200
  </script>
</body>

// a.js
var total = 100;
function getTotal() {
  return total;
}

// b.js
var total = 200;

따라서 이런 경우 원하는 결과가 나오지 않는다
자바스크립트는 기본적으로 변수의 유효 범위가 전역으로 잡히기 때문에 네임스페이스 모듈화 패턴이나 모듈화 라이브러리를 이용해 모듈화 기능을 구현해왔다.

import & export 기본 문법

export 문법

export 변수, 함수

다른 파일에서 가져다 쓸 변수나 함수의 앞에 export 라는 키워드를 붙여서 사용한다.
export 된 파일은 import로 불러와 사용 가능하다.

import 문법

import {불러올 변수 또는 함수 이름} from '파일경로';

export된 변수나 함수를 {}에 선언한 뒤 해당 파일이 있는 경로를 적어준다.

import & export 기본 예제

//math.js
export var pi = 3.14;
//app.js
export {pi} from './math.js';

console.log(pi); // 3.14

위 코드는 math.js라는 파일에서 pi를 export 하고 app.js파일에서 import 하여 콘솔창에 출력해주는 코드이다.

//math.js
export var pi = 3.14;
export function sum(a, b) {
	return a + b;
}
import { sum } from './math.js';

sum(10, 20); // 30

위 코드는 math.js에 두 숫자의 합을 구하는 sum() 함수를 익스포트 한 뒤 app.js에서 임포트하여 사용한 코드이다.

출처:
https://joshua1988.github.io/vue-camp/

profile
ppppqqqq

0개의 댓글