[리액트] export와 export default의 차이

 

 

리액트에서 export와 export default는 모듈을 내보내는 데 사용되는 키워드이다. 

이 두 키워드를 JavaScript 모듈 시스템에서 사용되며, 다른 파일에서 해당 모듈을 가져와 사용할 수 있도록 한다.

 

 

export 👉 import 시 { 함수이름 } ~ 로 불러온다.

export default 👉  import 시 { } 가 필요없다.

 

---

 

 

export

• export는 모듈에서 특정한 요소(함수, 변수, 클래스 등)를 내보내는 역할을 한다.
• export 키워드를 사용하여 특정 요소를 내보내면, 해당 요소는 다른 파일에서 import 키워드를 사용하여 가져올 수 있다.
• export는 여러 개의 요소를 동시에 내보낼 수 있으며, 내보낸 요소들은 이름을 가지고 있어야 한다.
  이러한 요소들은 가져올 때 동일한 이름으로 사용된다.

//모듈 파일 (예: utils.js)
export function add(a, b) {
	return a+b;
}
export const name = "John";


//다른 파일에서 가져오기
import { add, name } from "./utils";

 

 

 

 

export default

• export default는 모듈에서 기본적으로 내보내는 요소를 지정하는 데 사용된다. 
  모듈당 하나의 기본 내보내기만 할 수 있다.
• export default를 사용하여 특정 요소를 내보내면, 해당 요소는 가져올 때 별도의 이름을 지정하지 않고 가져올 수 있다.
• export default는 import문에서 중괄호({}) 없이 요소를 가져올 수 있어 편리하다.

//모듈 파일 (예: utils.js)
export default function add(a, b) {
	return a+b;
}


//다른 파일에서 가져오기
import add from "./utils";

 

 

 

 

export와 export default는 동시에 사용할 수 있다.

예를 들어, 모듈에서 기본적으로 내보내는 항목과 추가적인 항목들을 함께 내보낼 수 있다. 

//모듈 파일(module.js)
const message = "Hello, world!";
export default message;

export const name = "John";
export function sayHello() {
	console.log("Hello!");
}


//다른 파일에서 가져오기
import message, { name, sayHello } from "./module";
console.log(message); //Hello, world!
console.log(name); //John
sayHello(); //Hello!