React에서 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').

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

출처: https://velog.io/@eunjin/React-Default-Export-vs-Named-Export