export default
- 하나의 모듈(Module)에는 대개 하나의 export default가 존재한다.
- export default로 모듈을 내보낸다면 export한 이름과 상관없이 원하는 이름으로 import가 가능하다.
named export
- named export의 경우 반드시 export한 이름으로만 import할 수 있다.
- 반드시 import할 때 중괄호로 가져와야한다.
- 만약 다음과 같이 UserTest로 import하게 된다면 아래와 같이 컴파일에 실패하고 UserTest가 Test.js에 존재하지않다고 알려준다.
// Test.js
export default function Test() {
console.log("hi");
}
// App.js
import { useEffect } from "react";
import Testing from "./Test.js"; // Test로 내보냈지만 내가 원하는 이름(Testing)으로 가져올 수 있다.
function App() {
useEffect(() => {
Testing(); // hi가 출력됨
}, []);
return <div></div>;
}
export default App;
// Test.js
export default function Test() {
console.log("hi");
}
const User = ["John", "Ahn", "Kim"];
export { User }; // User로 내보낸다.
// App.js
import { useEffect } from "react";
import Testing from "./Test.js";
import { User } from "./Test.js";
// 반드시 User로 import 해야한다.
function App() {
useEffect(() => {
Testing(); // hi가 출력됨
console.log(User); // ["John", "Ahn", "Kim"] 이 출력됨
}, []);
return <div></div>;
}
export default App;
// 만약 User가 아닌 UserTest로 import를 시도한다면
import { UserTest } from "./Test.js";
function App() {
console.log(UserTest);
return <div></div>;
}
export default App;
