✏️ export 와 export default의 차이

 

 

React를 공부하다 보면 처음에 컴포넌트를 만들 때 

`export default 함수명(){ return <></>}` 이런식으로 작성을 하게 되는데

`export`와 `export default`의 차이점이 뭔지 궁금해서 찾아보게 되었다.

 

 

---

 

 

export default 의 특징

하나의 모듈에는 대개 하나의 export default 가 존재한다. (모듈은 하나의 파일을 지칭하는 것)

`export default`로 모듈을 내보내게 된다면, `export`한 이름과 상관없이 `원하는 이름`으로 import가 가능하게 된다.

 

 

 

 

 

export default 예시

export default function Main() {
  console.log("foo");
}

 

이렇게 작성하면, `Main`이라는 함수의 이름을 내보냈지만,

원하는 이름으로 import를 해서 가져올 수 있다.

 

 

 

 

import Foo from "./Main.jsx";

function App() {
  return( 
      <div> 
        <Foo/> 
      </div>
)}

export default App;

 

나는 분명 `Main` 이라는 이름으로 내보냈지만 `Foo`라는 이름으로 가져왔다.

그리고 `export default`로 선언하면, import 해서 가져올 때 `{ }` 중괄호를 빼고 가져올 수 있다.

 

 

 

---

 

또다른 예시

const Header = () => {
  return (
    <div>
     <h1>여기는 헤더 영역 입니다!</h1>
    </div>
  );
};

export default Header;

 

`const`로 변수를 선언하고, 아래에 내보내기로 선언을 해보았다.

 

 

 

 

 

 

import Test from "./Header.jsx";

function App() {
  return( 
      <div> 
        <Test /> 
      </div>
)}

export default App;

 

import로 불러왔을 때, 역시나 이름을 바꿀 수 있고,

import `{ } ` 중괄호 없이 불러올 수 있다.

 

 

 

---

named export 

name export를 할 경우 반드시 `export`한 이름으로 `import`가 가능하다.

또 다른 특징은 `{ }` 중괄호로 감싸서 가져와야 한다.

 

 

 

 

예시

export default function Main() {
  console.log("foo");
}


const Name = ["foo", "bar"];
export { Name };

 

Name을 내보내는 예시이다.

 

 

 

 

 

 

import { useEffect } from "react";
import Main from "./Main.jsx";
import { Name } from "./Main.jsx";

function App() {
  useEffect(() => {
    	Main();         // foo
	console.log(Name); // "foo", "bar"
  }, []);

  return <div></div>;
}

export default App;

 

import 내용을 보면 `Main`과 `{ Name }` 의 차이점이 있을 것이다.

만약에 `{ Name }` 대신 다른 이름으로 불러오려고 하면 컴파일에 실패하고 존재하지 않는다고 나온다.

 

 

 

 

 

 

 

정리하자면

named export : export한 이름으로만 가져올 수 있으므로 어떤 것을 import하는지 정확히 알 수 있다.
export default : 원하는 이름으로 import할 수 있다.

import { Setting } from '' //export는 불러서가져오기 가능
import Aaa from '' //export default로 한개만 가져오기
import Adasdfsd '' //export default로 이름 바꿔서 가져오기
import Adasdfsd , { apple } from '' //export default와 export 함께 가져오기
import * as S from '' //export 한방에 가져오기

 

 

 

---

 

결론

프로젝트마다 함수명을 어떻게 짓는지, 어떻게 컨벤션이 되어있는지에 따라 다르겠지만,

이렇게 정리해서 알아두니 차이점을 확실하게 알게 되었다!

`export default`를 사용해서 이름을 다르게 설정해서 가져오면 혼란을 야기할 수 있을 것 같다.

팀원과 함께 개발할 때는 이름을 일치하는 것이 좋을 것 같다는 생각을 하게 되었다.