Export와 Export default의 차이점

The export and export default are both ways to export declarations from a module in JavaScript or TypeScript, but they have some differences in their behavior and usage:

export: With the export keyword, you can selectively export one or more declarations (variables, functions, classes, etc.) from a module. You can export multiple declarations from a single module, and you can import them individually using the corresponding import syntax. Here's an example:

// Exporting individual declarations using 'export'
export const variable1 = 10;
export function foo() {
  // Function implementation
}
export class MyClass {
  // Class implementation
}

To import the exported declarations individually:

import { variable1, foo, MyClass } from './module';

export default: The export default syntax allows you to export a single default value from a module. You can have only one default export per module. The default export is often used to export a single value, such as a class, function, or object literal, which is considered the main export of the module. Here's an example:

// Exporting a default value using 'export default'
export default function foo() {
  // Function implementation
}

To import the default export:

import foo from './module';
If you need to import both named exports and the default export from the same module, you can combine them in a single import statement:

import foo, { variable1, MyClass } from './module';

In summary, export is used to export multiple named declarations, while export default is used to export a single default value from a module. The choice between them depends on your specific use case and the desired import syntax.