Exports & Imports

Exports & Imports

React 프로젝트에서 (그리고 실제로 모든 최신 JavaScript에서) 모듈이라 불리는 여러 자바스크립트 파일들에 코드를 분할한다. 이렇게 하면 각 file/ 모듈의 목적을 명확하게 하고 관리가 용이하게 한다.

 

다른 파일의 기능에 계속 액세스하려면 export  (available하게 하기 위해) 및 import 엑세스를 확보하기 위해) statements가 필요하다.

 

Export : default (unnamed) /  named

default => export default ...; 

named => export const someData = ...; 

 

default exports

import someNameOfYourChoice from './path/to/file.js'; 

 

Named exports

이름으로 import되어야 한다.

import { someData } from './path/to/file.js'; 

파일 하나는 오직 하나의 default와 무한한 named exports를 가질 수 있다.

하나의 default를 같은 파일 내에서 named exports와 혼용할 수 있다.

 

Import

named exports를 import할 때, 다음 구문을 이용해 한 번에 모든 named exports를 import할 수 있다.

 

import * as upToYou from './path/to/file.js'; 

 

upToYou 는 모든 exported 변수/함수를 하나의 자바스크립트 객체에 모은다.

예를 들어, export const someData = ...  (/path/to/file.js ) 이와 같이 upToYou 에 액세스 할 수 있다.