CRA 방식으로 리액트를 사용해보면 기본적으로 export default가 되어있는 많은 파일들을 볼 수 있다.
그런데 또 styled-components 방식으로 스타일링을 해보면 단순히 export만 하게 되는 경우 또한 볼 수 있다.
그러면 export와 export default의 차이점은 무엇일까?
쉽게 말해
export default : 어떤 이름으로 불러와도 상관 없다.
export : 그 이름을 그대로 써야한다.
이렇게 생각하면 편하다.
예를 들어 components 폴더에 Inner 라는 파일을 만들어 App.js에서 불러와보자.
[ src > components folder > inner.jsx ]
import React from 'react'
const Inner = () => {
return (
<div>
This Is Inner
</div>
)
}
export default Inner
[ src > App.js ]
import Inner from './components/Inner';
function App() {
return (
<div>
This is App.js
<hr />
<Inner />
</div>
)
}
export default App;
이렇게 하면 모든 결과가 잘 도출 되게 된다.
그런데 이때 App.js에서 import Inner한 것을 다른 것으로 바꾸면 어떨까?
[ src > App.js ]
import Component from './components/Inner';
function App() {
return (
<div>
This is App.js
<hr />
<Component />
</div>
)
}
export default App;
이렇게 바꿔도 똑같이 작동한다!
왜냐하면 Inner.jsx에서 export default를 했기 때문에 어떤 이름이건 그 내용이 Default로 나오기 때문이다.
(단, 제일 첫 글자는 대문자 사용할 것)
일반적으로 이렇게 잘 하지 않는 이유는 파일명과 동일 시 하게 만들어서 한 눈에 정확하게 알아보기 쉽게 하기 위해서이다.
그렇다면 이번에는 Inner.jsx에 export만 해보자!
import React from 'react'
export const Inner = () => {
return (
<div>
This Is Inner
</div>
)
}
이렇게 default를 빼고 사용하게 되면, App.js에서 어떻게 불러와야할까?
import { Inner } from './components/Inner';
function App() {
return (
<div>
This is App.js
<hr />
<Inner />
</div>
)
}
export default App;
위와 같이 Javascript Object destructuring 이라고 하는 { } syntax를 사용해서 import 해볼 수 있다.