import { io } from 'socket.io-client';에서 {}의 유무차이

간단한 예를 들어 {}의 유무와 named export 및 default export의 차이를 설명하겠습니다.

---

예제 1: Fruit 모듈

fruit.js라는 파일이 있다고 가정합니다. 이 파일에서 과일 정보를 export한다고 해볼게요.

1. Named Export

// fruit.js
export const apple = '🍎';
export const banana = '🍌';

fruit.js에서 apple과 banana는 각각 named export로 정의되어 있습니다.
이 경우, import할 때 반드시 이름을 정확히 매칭해서 가져와야 합니다:

// main.js
import { apple, banana } from './fruit.js';

console.log(apple);  // 출력: 🍎
console.log(banana); // 출력: 🍌

만약 이름이 다르면 에러가 발생합니다:

// main.js
import { orange } from './fruit.js'; // 에러: 'orange' is not exported from './fruit.js'

---

728x90

2. Default Export

// fruit.js
const fruitBasket = {
  apple: '🍎',
  banana: '🍌',
};
export default fruitBasket;

여기서 fruitBasket은 default export로 정의되었습니다.
이 경우, 이름을 자유롭게 지정해서 import할 수 있습니다:

// main.js
import basket from './fruit.js';

console.log(basket.apple);  // 출력: 🍎
console.log(basket.banana); // 출력: 🍌

이름을 바꿔도 문제없습니다:

// main.js
import myFruits from './fruit.js';

console.log(myFruits.apple);  // 출력: 🍎
console.log(myFruits.banana); // 출력: 🍌

---

예제 2: Mixed Export

fruit.js에서 named export와 default export를 동시에 사용하기도 합니다:

// fruit.js
export const apple = '🍎';
export const banana = '🍌';
const fruitBasket = { apple, banana };
export default fruitBasket;

이 경우, import 시 다음과 같이 사용할 수 있습니다:

// main.js
import basket, { apple } from './fruit.js';

console.log(basket); // 출력: { apple: '🍎', banana: '🍌' }
console.log(apple);  // 출력: 🍎

---

728x90

차이를 한눈에 정리

유형 선언 방식 가져오는 방식 자유로운 이름 지정

유형	선언 방식	가져오는 방식	자유로운 이름 지정
Named Export	export const apple = '🍎';	import { apple } from './file';	❌ (정확히 일치해야 함)
Default Export	export default fruitBasket;	import basket from './file';	✅ (아무 이름 가능)

 

---

실제 예제: lodash

1. Lodash 라이브러리의 경우, 주로 default export를 사용합니다:

import _ from 'lodash'; // 이름 자유롭게 설정 가능

1. 반면, React 라이브러리는 default export와 named export를 혼합해서 사용합니다:

import React from 'react'; // React는 default export
import { useState } from 'react'; // useState는 named export

---

결론

• {}가 있으면 named export를 가져오는 것이고, 이름이 정확해야 합니다.
• {}가 없으면 default export를 가져오는 것이며, 이름은 자유롭게 설정할 수 있습니다.