리액트로 프로젝트를 진행할 때, import를 사용하게 되는데
어느 경우에는 { }를 사용할 때가 있고, 사용하지 않는 경우가 있다.
export와 imoprt, 그리고 { }는 무슨 상관 있을까?

export와 import { }

굳이 export와 import { }를 묶어놨다.
그 이유는 당연하게도 둘은 같이 사용되어야하기 때문이다.

예시로 살펴보자.

// Export.js

export function Export() {
  return (
    <div>
      <h1>Export</h1>
    </div>
  );
}

위 컴포넌트를 App.js에서 import해서 사용하고자 한다.
Export 컴포넌트는 Export.js 파일에서 export되고 있다.

// App.js

import { Export } from "./Export";

export default function App() {
  return (
    <div>
      <Export />
    </div>
  );
}

단순하게 export만 해준 컴포넌트는 중괄호 { }로 감싸서 import를 해야한다.
그러지않으면 에러가 발생하게 될 것이다.

import한 컴포넌트의 이름을 바꾸고싶다면

꼭 import를 해올 때, 컴포넌트의 이름대로 사용할 필요는 없다.
프로젝트가 조금만 길어져도(심지어 개인 토이 프로젝트에서도) 겹치는 이름이 생기기마련이기 때문이다.

그렇다면 어떻게 이름을 바꿀 수 있을까?
이는 import를 해오는 파일에서 설정할 수 있다.
위 예시에서는 App.js가 import를 하는 중이니,
거기서 Export 컴포넌트의 이름을 바꿔서 사용해보자.

// App.js

import { Export as BlaBla } from "./Export";

export default function App() {
  return (
    <div>
      <BlaBla />
    </div>
  );
}

이래도 전~혀 문제가 없다.

export default와 import

export default로 내보낸 컴포넌트는 import를 할 때 중괄호 { }가 필요없다.
바로 예시로 살펴보자.

export default function ExportDefault() {
  return (
    <div>
      <h1>ExportDefault</h1>
    </div>
  );
}

위 컴포넌트를 App.js에서 import 해보겠다.

// App.js

import ExportDefault from "./ExportDefault";

export default function App() {
  return (
    <div>
      <ExportDefault />
    </div>
  );
}

짠! 그냥 export를 한 것과 무엇이 다른가?
중괄호를 사용하지 않아도 된다!

export default.
즉, ExportDefault.js라는 파일에서 import를 할 때,
따로 특정하지않으면, ExportDefault라는 컴포넌트가 export 된다는 것이다.

따라서 App.js에서 중괄호를 사용해 특정 컴포넌트를 import하겠다고 말해주지 않아도,
default 값인 ExportDefault 컴포넌트를 import하는 것이다.

import한 컴포넌트의 이름을 바꾸고싶다면

export default라고 해서 컴포넌트 이름을 못 바꾸는 것이 아니다.
얘도 이름을 바꿀 수 있다.

// App.js

import WowDefault from "./ExportDefault";

export default function App() {
  return (
    <div>
      <WowDefault />
    </div>
  );
}

짠! ExportDefault라는 이름으로 사용하고 있던 컴포넌트를 WowDefault로 변경했다.

이름을 완전히 변경해도 어차피 그 이름에는
ExportDefault.js라는 파일에서 export default 표시가 되어있는 컴포넌트가
import 되는 것이기 때문에 문제가 없는 것이다.

또한, 아까 export만 사용했던 컴포넌트와는 다르게 as가 사용되지 않았다.
오히려 as 붙여서 작성하면 에러가 발생한다.