react에서 export와 export default 차이

export와 export default는 모두 모듈을 외부에서 사용할 수 있도록 내보내는 방식이지만, 사용법과 의미가 다릅니다.

 

 

1.export: 여러 개의 값을 내보낼 때 사용합니다. 한 파일에서 여러 개의 변수를 내보낼 수 있습니다. 내보낼 때 이름을 붙여서 내보내므로, import할 때도 그 이름을 그대로 사용해야 합니다.

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// 다른 파일에서
import { add, subtract } from './utils';

 

 

2. export default: 기본 내보내기 방식입니다. 한 파일에서 하나의 값을 기본적으로 내보낼 때 사용됩니다. import할 때 이름을 바꿔서 사용할 수 있습니다.

// utils.js
const multiply = (a, b) => a * b;
export default multiply;

// 다른 파일에서
import multiplyFunction from './utils';

 

 

 

 

요약:

• export: 여러 항목을 내보낼 때 사용, import할 때 이름을 정확히 맞춰야 함.
• export default: 하나의 기본 항목을 내보낼 때 사용, import할 때 이름을 자유롭게 지정할 수 있음.