단순히 export default는 하나만 내보낼 때 쓰고, export {} 는 여러개 내보낼 때 쓰는 줄 알았는데

강의를 보다가 router 파일을 import하는 곳에서 내가 보낸 변수명과 다르게 선언되는 것을 같이 스터디하는 친구가 발견!!

전혀 생각치도 못했다 ㅋㅋㅋ 이건 정리해두어야 할 내용이다.

🚀 export default

• 하나의 모듈(파일)에는 대개 하나의 export default가 존재함

• export default로 모듈을 내보낸다면 export한 이름과 상관 없이 원하는 이름으로 import가 가능하다 내가 몰랐던 부분😶

• 이렇게 내보낼 파일을 만들고

// user.router.js
import express from 'express';

const router = express.Router();

// 사용자 회원가입 API
router.post('/signup', async (req, res, next) => {
  
...

export default router;

• 받아올 파일에서는

// app.js
import express from 'express';

// 요렇게 내보낸 이름과 상관없이 
// 'UsersRouter' 라는 이름으로 import 해서 쓸 수 있다!!!
import UsersRouter from './routes/user.router.js';

...

app.use('/api', [UsersRouter]);

...

🚀 named export

• export 해준 이름으로 쓰고 싶을 때 사용한다.
• import 할 땐 반드시 중괄호로 가져온다.

// 사용자 회원가입 API
const userSignUpRouter = router.post('/signup', async (req, res, next) => {
  
...

export { userSignUpRouter };

• 받아올 파일에서는

// app.js
import express from 'express';

// 내보내준 이름과 동일하게
// 중괄호 필수!!
import { userSignUpRouter } from './routes/user.router.js';

...

app.use('/api', [userSignUpRouter]);

...

참고자료: https://velog.io/@navyjeongs/%EB%A6%AC%EC%95%A1%ED%8A%B8-export-default%EC%99%80-export%EC%9D%98-%EC%B0%A8%EC%9D%B4