모듈을 Import 할 때 { }(중괄호)를 쓰는 경우와 아닌 경우(Node.js)

Node.js를 통해 코드를 작성하다보면 import를 매우 많이 사용하게 된다. 이는 외부에서 만든 모듈 또는 개발 과정에서 만든 모듈을 가져올 때 사용하는 문법이다.

(추가적으로 모듈의 개념에 대해서는 처음 프로그래밍을 하는 사람이라면 모호한 개념일 수 있는데 이 글을 통해 어느정도 모듈이란 무엇인지에 대해서 이해할 수 있게 될 것이다.)

 

import를 많이 사용하면서 중괄호({ })를 쓰는 경우가 있고 안 쓰는 경우가 있는데 어떤 상황에서 각각 사용되는지에 대해 궁금증을 갖고 찾아보게 되었다.

 

모듈은 외부에서 만든 모듈(대표적으로 express)을 사용하는 경우와, 개발하는 과정에서 내가 모듈을 만들어서 사용하는 경우가 있다. 이렇게 만들어진 모듈은 export를 통해 내보내기를 할 수 있고 내보내진 모듈을 import 해와서 해당 모듈을 사용할 수 있다.

 

그리고 외부에서 만들 모듈이든, 내가 만든 모듈이든 export를 하는 방식은 default export와 named export 2가지가 있다.

 

*default export

 

-대표적으로 express가 default export 이다.

-모듈을 그냥 통째로 export 하는 방식이다.

-default export의 형식인 모듈을 가져올 때는 { }를 사용하지 않고 import 할 수 있다.

 

*named export

-대표적으로 유효성 검사를 도와주는 모듈인 express-validator가 named export 이다.

-모듈에서 특정 변수, 함수, 클래스 등을 개별적으로 내보내는 방식이다.

-named export의 형식인 모듈을 가져올 때는 { }를 사용해서 import 해야 한다.

 

(모듈을 default로 export 할지, named로 export 할지는 모듈을 만든 사람의 마음이다.)

 

=> 결과적으로 { }를 사용하는지에 대한 여부는 default export냐 named export냐에 따라 결정이 된다.

 

아래의 코드를 보자.

 

1. 외부 모듈을 가져오는 경우

import express from "express";

//express는 default export 방식인 모듈이다.
//그렇기 때문에 { }를 사용하지 않고 import를 해왔다.

import { body } from "express-validator";

//express-validator는 named export 방식인 모듈이다.
//그렇기 때문에 모듈의 여러 기능(속성)들을 가져와서 쓰고 싶을 때는 원하는 속성을 { } 안에 넣어서 가져오면 된다.

 

*참고로 외부 모듈을 사용하려고 할 때 default 인지 named 인지에 대해서는 구글링 또는 공식 문서를 읽고 확인하면 된다. 

 

 

2. 내가 만든 모듈을 가져오는 경우

// hello.js

export default function hello(name) {
  console.log(`Hello, ${name}!`);
}

//hello.js에서 default로 export를 했을 때
//app.js에서 이를 import 해온다면

// app.js

import hello from './hello.js';

hello('World');

//이렇게 { }를 사용하지 않고 hello 함수를 가져와서 사용할 수 있다.

// greet.js

export function hello(name) {
  console.log(`Hello, ${name}!`);
}

export function bye(name) {
  console.log(`Bye, ${name}!`);
}

//greet.js에서 default가 아닌 named로 export 한 경우
//app.js에서 import를 해오려면

// app.js

import { hello, bye } from './greet.js';

hello('World');
bye('World');

//이렇게 hello와 bye를 { } 안에 넣어 해당 함수를 가져와서 사용할 수 있다.

 

 

3. 응용하기

//exam.js

import { validationResult } from "express-validator";

export const validate = (req, res, next) => {
  const errors = validationResult(req);
  if (errors.isEmpty()) {
    return next();
  }
  return res.status(400).json({ message: errors.array()[0].msg });
};

//express-validator 모듈은 named export 방식이기 때문에 { }를 사용해서 가져온다. 
//이 모듈을 통해 validate 라는 함수를 만들어서 named export 방식으로 export를 했다.
//그럼 이제 exam.js 파일은 '모듈'이 되었으므로 이를 app.js에서 import 해서 사용해보자.

//app.js

import { validate } from "../middleware/validator.js";

//내가 만든 exam.js 모듈은 named 방식이기 때문에 { }를 사용해서 가져와야 한다.

 

*추가적으로 만약 모듈에서 named export와 default export를 모두 사용하는 경우, 두 가지 방식을 모두 사용할 수 있다.

 

*한 줄 요약

=> 외부 모듈이든 내가 만든 모듈이든 default냐 named냐에 따라 {}의 사용 여부가 결정된다.