[React] React에서 import할때 {}중괄호 유무의 의미

문득 import 문에서 궁금한 점이 생겼다.

어떤 것은 그냥 import하고, 어떤 것은 중괄호{ } 안에 적어준다는 것이다.

 

그동안 별 생각 없이 다운받은 패키지에서 가져올 때는 {}를 붙이고~ 내가 만든거에서는 {}없이 하니 잘되네~

라고 생각했었는데 왜?라는 생각을 해본적이없었다!

 

그래서 찾아봤다 :)

 

import React from 'react';
import TodoTemplate from './components/TodoTemplate';
import { TodoProvider } from './TodoContext';

 

이 파일은 이제부터 React와 TodoTemplate, TodoProvider라는 변수를 사용할 수 있다.

그런데 아래 두개를 기준으로 볼때

TodoTemplate도 내가 만든파일, TodoContext도 내가 만든 파일인데 왜 TodoContext만 {}안에 들어간걸까?

 

이유는 export 방식의 차이이다.

 

모듈을 불러올 때 import라고 써주는 것처럼, 

모듈을 다른 파일로 보내려면 export라고 명시적으로 써줘야한다. 

 

export default TodoTemplate;

 

export TodoContext;

 

export해줄때 default를 붙인 TodoTemplate의 경우 중괄호없이 그냥 import하지만

default없이 export해준 TodoContext의 경우에는 중괄호 안에 담아 import해주면 되는 것이당 :)

 

./src/App.js
Attempted import error: './TodoContext' does not contain a default export (imported as 'TodoProvider').

잘못할 경우 이런 에러가 발생한다