[JavaScript] import 와 export

[ import와 export ]

React 등 현대의 Javascript 기반 프로젝트 파일을 열어보면 import와 export가 무수히 많다.

import와 export는 무엇일까?

 

사전적 정의

import : 수입, 가져오다. 
1. to buy or bring in products from another country
2. to introduce new goods, customs, or ideas to one country from another

export : 수출, 내보내다.
1. to send goods to another country for sale
2. to put something from one country into use in other countries

 

사전적 정의를 보아 짐작할 수 있듯, 소스코드를 각각 내보내고 가져오는 것을 의미한다.

React는 다른 폴더에 있는 파일을 불러올 수 있다. 소스코드가 너무 길어질 때 용도별, 컴포넌트별로 파일을 분리한 뒤 import/export로 연결해주면 프로젝트 폴더를 효율적으로 관리할 수 있다.

 

1. import ~ from ''"

선택한 파일에서 선택한 소스코드를 가져오겠다는 의미이다. from 뒤에 위치한 파일에서 ~ 에 해당하는 코드를 가져온다. 이렇게 불러오면 import한 문서 내에서도 해당 코드를 사용할 수 있다.

 

2. export const ~ 혹은 export {}

해당 변수 안에 있는 데이터를 객체에 담아 내보낸다는 의미이다. 이렇게 내보내면 다른 문서에서 해당 데이터를 import해 사용할 수 있다.

 

3. export default

default는 기본이라는 의미를 담고 있다. export default는 변수, 함수, 오브젝트, 클래스 등을 내보낼 수 있는 명령어로, defalut로 export한 함수 등은 중괄호를 사용하지 않고 import 할 수 있다. 단, export default는 한 문서에서 한 번만 사용이 가능하다.