JS ES6 export(default, named)

Q1.

React를 공부하다 보니, 이래저래 import/export 할 일들이 많은데,

궁금해진 것이,

 

JS ES6 버전 이후에서는 export 할 때 default export와 {}를 쓰는 export가 있던데,

 

1. {}를 쓰는 export를 named export 방식이라 하는지

2. export 하는 방식에는 default와 1번에 물어본 방식 뿐인지

3. 두 방식 import 시 모듈 이름을 바꿔서 쓸 수 있는지

4. import React from 'react'; 에서 React는 바꿔 쓸 수 있는지 이렇게 4가지가 궁금해.

 

 

 

A1.

ChatGPT의 말:

 

JavaScript ES6의 **import/export**는 모듈화를 통해 코드를 더 효율적으로 작성하고 재사용할 수 있도록 도와주는 강력한 도구입니다. 질문하신 4가지 사항을 하나씩 정리해서 답변드릴게요.

---

1. {}를 쓰는 export를 named export 방식이라 하는지

• 네, 맞습니다! {}를 사용하는 export 방식은 named export라고 부릅니다.
  • Named export는 여러 개의 값을 하나의 모듈에서 내보낼 수 있습니다.
  • 예:

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

여기서 add와 subtract는 이름이 명시된(named) export입니다.

• 가져올 때도 명시적으로 이름을 지정해야 하며, 중괄호를 사용합니다:

import { add, subtract } from './utils.js';

 

---

2. export 하는 방식에는 default와 1번에 물어본 방식뿐인지

• 주요 export 방식은 2가지입니다:

1). Default export

• 모듈당 하나의 기본(default) 값을 내보낼 때 사용합니다.
• 예:

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

• 가져올 때는 이름을 자유롭게 정할 수 있습니다:

import multiplyFunction from './utils.js'; // 이름 변경 가능

 

2). Named export

• 여러 개의 값을 내보낼 수 있습니다.
• 예:

export const divide = (a, b) => a / b;
export const mod = (a, b) => a % b;

• 추가 팁: 하나의 파일에서 default export와 named export를 동시에 사용할 수도 있습니다:

// utils.js
export default function main() {
  console.log('Default Exported Function');
}
export const helper = () => console.log('Named Exported Helper');

---

3. 두 방식 import 시 모듈 이름을 바꿔서 쓸 수 있는지

• Default export는 가져오는 이름을 자유롭게 변경할 수 있습니다:

// utils.js
export default function greet() {
  console.log('Hello!');
}

// main.js
import hello from './utils.js'; // 이름 변경 가능
hello(); // Hello!

• Named export는 이름을 변경하려면 as 키워드를 사용해야 합니다:

// utils.js
export const greet = () => console.log('Hello!');

// main.js
import { greet as sayHello } from './utils.js'; // 이름 변경
sayHello(); // Hello!

---

4. import React from 'react';에서 React는 바꿔 쓸 수 있는지

• 네, 바꿔 쓸 수 있습니다.
  • react 패키지는 default export로 React 객체를 내보내고 있으므로, 이름을 자유롭게 지정할 수 있습니다.

import MyReact from 'react';
console.log(MyReact); // React 객체 출력

• 하지만, 코드의 가독성과 컨벤션을 위해 일반적으로 React라는 이름을 그대로 사용하는 것이 권장됩니다.

---

추가 팁: Default Export와 Named Export의 차이점 요약

 

Default Export	Named Export
한 파일에 1개만 가능	한 파일에 여러 개 가능
이름을 자유롭게 변경 가능	as 키워드로만 이름 변경 가능
export default value;로 작성	export { value1, value2 };로 작성
가져올 때 중괄호 필요 없음	가져올 때 반드시 중괄호 필요

궁금한 부분이 더 있으면 추가 질문 주세요! 😊