import는?

import는 export된 모듈의 함수, 객체, 변수 등을 다른 모듈에서 사용하는 것이다.

export는?

export는 모듈의 함수, 객체, 변수 등을 다른 모듈에서 사용 가능 하도록 내보내주는 것이다.

쉽게 말하자면 export를 통해 내보내고 import를 통해 다른 모듈에서 받아 사용하는 것이다.

import export 사용법

import는 exprot로 내보내진 것을 가져와 사용하는 것이다. 따라서 export로 내보내질때 사용된 변수를 {}안에 입력해야한다.

//import
import {Logo} from '../../../styles/index';

//export
export const Logo = styled.div`
height: 500px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

만일 export defult로 내보낸 경우라면?

//import
import cat from ''
//exprot default
const cat = "lulu"
export default cat

export defult로 export 된 경우에는 예시와 같이 import에{}가 사용되지 않는다.

export defult와 export는 무엇이 다른가?

export default는 내보내는 값이 한 개인 경우에 사용된다.
export의 경우 여러개를 내보내고 import의 {}안에 나열하여 여러개를 사용할 수 있다.
반면에 export default는 가장 먼저 export default 된 값 하나만을 내보낸다.