import와 export

React에서 애플리케이션의 크기가 커질수록 하나의 파일에서 코드를 작성하기에는 한계가 있다. 이러한 문제를 해결하기 위해 자바스크립트에서는 모듈(module)이라는 기능을 지원하여 하나의 파일을 여러 개의 파일로 나눌 수 있다.

방법1. 파일경로를 직접 접근하여 import

프로젝트의 규모가 커지고 여러 개의 파일을 import 하는 경우 파일의 개수만큼 import 하므로 비효율적인 코드를 생성하고 코드를 작성하는데 불필요한 시간을 소모한다.

export와 import

export : 변수, 함수, 클래스 앞에 export 키워드를 붙여서 모듈의 기능을 외부에서 사용할 수 있도록 내보낸다.

import : export로 내보낸 모듈을 가져오는 기능을 담당한다.

import 키워드 다음에 식별자(사용할 변수, 함수, 클래스)를 작성한다.
form 키워드 다음에 불러올 모듈의 경로를 작성한다.

export 할 때 default라고 적을 경우에 import 할 때 중괄호{} 없이 모듈을 가져오고
export 할 때 dufaultf라고 적지 않은 경우에는 import 할 때 중괄호{}를 사용하여 모듈을 가져온다.