기본 import 구문에 {} 이 있는 경우와 없는 경우의 차이점

[주인장]

1️⃣ {} 없는 import → default export

import useStompWebSocket from "../hook/useStompWebSocket"; 

해당 파일에서 export default로 내보낸 것을 가져오는 경우 

export default function useStompWebSocket() {
  // ...
}

또는 

const useStompWebSocket = () => {
  // ...
};

export default useStompWebSocket;

특징 :

1. 이름 마음대로 가능

2. 파일당 default export는 하나만 가능

import aaa from "../hook/useStompWebSocket"; // 가능

2️⃣ {} 있는 import → named export

import { sendMessage } from "../service/apiService";

export function sendMessage(msg) {
  // ...
}

export function connect() {
  // ...
}

또는 

export const sendMessage = () => {};

특징 

1. 이름 반드시 일치해야 함

2. 한 파일에서 여러 개 export 가능