Import, Export

▶ Moularization

• React는 프로그램을 구성하는 내부의 코드를 기능별로 나누어 Module형식으로 관리하는데 용이함
• 한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있음
• 재사용성이 증가함

▶ import 할 때, {}의 차이

• 모듈을 보내주는 export 방식의 차이
• 모듈을 다른 파일에서 불러올 때, import 사용하듯, 모듈을 다른 파일로 보내려면 export라고 작성해야 함.

 

• Example.js

const a = 1;
const b = 2;

export a;
export default b;

• Sub.js

import hi, {a} from './Example';

 

 

• Example.js에서 export한 모듈을 불러오기 위해선, Sub.js에서 import로 불러와서 사용하면 됨.
• 맨처음있는 hi는 default로 export한 b를 import한것. 변수명을 마음대로 설정 가능
• 괄호안에 변수로 이름을 바꾸고 싶다면 as라는 키워드를 이용하여 바꿀 수 있음