본문 바로가기
react - 정리중/basic

내보내기 export /가져오기 import

by by-choice 2021. 10. 30.

1. export: 내보내기

export default

export default는 어떤 파일의 코드를 타파일에서 사용하고 싶을 때 사용하는 코드로, 뒤에는 변수명이나, 함수가 들어갈 수 있다. 예로, 'mint coding'이 여러 곳에서 사용되어야 할 경우, 이를 name에 담아 export 해주면 그 어떤 파일에서도 간단히 name으로 해당 값을 넣어줄 수 있다.

const name = 'mint coding';
export default name;

export는 맨 마지막 줄에 위치하여, 한 파일에서 단 한번만 사용할 수 있다.

2. import 가져오기

import 작명 from './경로.js'; // .js를 생략해도 괜찮다.
import name from './경로.js'; // 꼭 name일 필요 없다. 원하는 대로 작명해도 괜찮다

3. 내보낼 변수/함수가 2개 이상일 경우 

내보낼 변수/함수가 2개 이상일 경우에는, default를 삭제하고 중괄호{ } 안에 각 변수명을 넣어준다.

const name = 'mint coding';
const writer = 'cinnamon';
export { name, writer };

그리고 import 할 때, 작명이 아니라, export 할 때 작성했던 중괄호{ }안 문구를 동일하게 작성해줘야 한다.

import { name, writer } from './경로.js';

댓글