[React] export VS export default

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 해볼 수 있다.