Import / Export 문법 복습

1. 기본 export / import

📂 util.js

let apiKey = 'abc123'; export { apiKey };

 

📂 app.js

import { apiKey } from './util.js'; console.log(apiKey);

• export { 변수 } → 공개하기
• import { 변수 } from 경로 → 가져오기
• 이름과 대소문자 맞춰야 함

---

2. default export

📂 util.js

export default 'abc123';

 

📂 app.js

import key from './util.js'; console.log(key);

• 파일당 하나만 가능
• 가져올 때는 중괄호 ❌, 이름 마음대로 지정 가능
• 리액트 컴포넌트에서 제일 많이 씀 (파일당 컴포넌트 하나 → default export 적합)

---

3. 여러 개 export

📂 util.js

export const apiKey = 'abc123'; export const abc = 'hello';

 

📂 app.js

import { apiKey, abc } from './util.js'; console.log(apiKey, abc);

• 여러 개는 ,로 묶어서 가져오기 가능

---

4. 한 번에 가져오기

📂 app.js

import * as util from './util.js'; console.log(util.apiKey); console.log(util.abc);

 

• 모든 export를 객체(util)에 모아서 가져오기

---

5. 이름 바꾸기 (별칭)

📂 app.js

import { abc as content } from './util.js'; console.log(content);

 

• as 써서 별칭 붙일 수 있음

---

6. type="module"

• 바닐라 JS → <script type="module" src="app.js"></script> 필요
• 리액트 → 빌드 프로세스가 알아서 처리 → 안 써도 됨

---

내가 이해한 핵심

• 기본 export: {}로 가져옴
• default export: 하나만, 중괄호 없이 이름 마음대로
• 여러 개 export: ,로 가져오거나 * as로 묶기
• as로 별칭 가능
• 리액트는 대부분 default export 방식 사용

---

👉 결국 import/export는 파일 간 코드 공유를 위한 도구
앞으로 컴포넌트 만들 때 계속 쓰게 될 거라 익숙해져야 한다.