2.React로 영화 소개 사이트 만들려 했으나... 개념 공부

예제 프로젝트를 진행하려다가 import 부터 막혔다...

내가 보고 있는 책(리액트 교과서) 에는 아래와 같이 객체를 불러오는데

const React = require('react')

const { render } = require('react-dom')

const { Provider } = require('react-redux')

const { createStore } = require('redux')

const reducers = require('./modules')

const routes = require('./routes')

내가 들은 인터넷 강의에서는 아래와 같이 객체를 불러오는 차이가 있었다 ...

import React from 'react';

import {render} from 'react-dom';

import {Provider} from 'react-redux';

import {createStore} from 'redux';

import reducers from './modules';

import routes from './routes';

무슨 차이가 있는지 구글링해 보니 위의 방식은 CommonJS에서 객체를 import하는 방식이고 밑의 방식이 ES6에서 사용되는 방식이었다.

	CommonJS	ES6
import	const abc = require('abc')	import abc from 'abc'
export	module.exports = { abc }	export abc / export default abc

(이왕이면 표준화된 ES6 기반의 문법을 쓰고 싶기에 ... 책을 바꿔야 할까 고민이 된다..)

그리고 추가적으로 서치해보니 ES6에서 export 방식이 2가지가 있다 named export와 default export

차이점은 named export는 import할 때 export때 정해진 이름으로 import 해야하는 것이고

default export는 하나의 파일에 한번만 사용할 수 있으며 import 할 때 export때 이름과 상관없이 원하는 이름으로 import 가능하다.

export const abc = 'abc'; -> import { abc } from 'lib.js';

export default abc; -> import changename from 'lib.js';

결론

쉽게 말해 import할 때 {}가 붙어있으면 export할때 정해진 객체 이름을 그대로 써야하는 거고 

{}가 없이 import한 거는 내가 임의로 객체 이름을 정한 것이다.

참고

http://www.daleseo.com/js-module-import/

https://beomy.tistory.com/22