react+vue

[javascript] import/export 방법

h-yujin 2022. 9. 21. 14:28

Sub.js를 import할 경우

  • Sub.js

export default Sub; ⇒ Sub함수를 외부에 노출시킨다.

  • 외부에서 Sub.js를 사용할 경우

import 함수이름 from 파일 경로로 사용한다.

<Sub></Sub> 또는 <Sub/>으로 작성하면 자동 import된다.

 

 

import시 중괄호 {} 사용하는 경우

  • default 외에 다른 값 또는 함수를 export 시키는 경우 사용한다.
  • Sub.js의 예시

default인 Sub 함수 외에 num 변수를 export시키기 위해 export {num};으로 작성하였다.

  • import

import {변수} from ‘경로’; 로 import할 수 있다.

사용시 {변수}로 가져와 사용한다.

앞의 예시에서는 div태그가 없었지만 return값은 하나의 태그만 가능하기 때문에

Sub태그와 num값 두개를 반환하기 위해 div태그로 감싸주었다.

하나의 태그만 반환할 수 있다는 것을 기억하자.