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 에 액세스 할 수 있다.
'Front-end > React' 카테고리의 다른 글
useState / useEffect / useContext (0) | 2023.01.10 |
---|