Front-End/React

[React] export와 export default의 차이

유자맛바나나 2021. 10. 4. 01:03

 

export와 export default의 차이

1. export

  • export만 사용한 컴포넌트의 경우 import 할 때 각 컴포넌트를 직접 명시해줘야 한다.

Box.js

  • export default를 사용하지 않고 export로만 세 가지 컴포넌트를 정의함
export const RedBox = () => {
  return <div style={{ backGroundColor: "red" }}>Red Box</div>;
};

export const GreenBox = () => {
  return <div style={{ backGroundColor: "green" }}>Green Box</div>;
};

export const BlueBox = () => {
  return <div style={{ backGroundColor: "blue" }}>Blue Box</div>;
};

App.js

  • Box.js의 각 컴포넌트를 import 할 때 컴포넌트 명을 {}안에 정확히 명시해주어야 한다.
  • as를 이용해 alias를 지정할 수 있다.
import React from "react";
import { RedBox as RB, BlueBox, GreenBox } from "./Box";

const App = () => {
  return (
    <div>
      <RB />
      <GreenBox />
      <BlueBox />
    </div>
  );
};

export default App;

 

2. export default

  • export default를 사용한 컴포넌트가 있을 경우 해당  import 할 때 해당 컴포넌트를 직접 명시해줘야 한다.

Box.js

  • RedBox 컴포넌트를 export default로 지정함
const RedBox = () => {
  return <div style={{ backgroundColor: "red" }}>Red Box</div>;
};
export default RedBox;

export const GreenBox = () => {
  return <div style={{ backgroundColor: "green" }}>Green Box</div>;
};

export const BlueBox = () => {
  return <div style={{ backgroundColor: "Blue" }}>Blue Box</div>;
};

App.js

  • Box.js에서 import 할 때 export default로 지정된 컴포넌트(RedBox)를 반드시 작성해야 한다.
  • default로 지정되지 않은 컴포넌트 들은 {} 안에 작성해서 사용가능하다.
import React from "react";
import RedBox, { GreenBox, BlueBox } from "./Box";

const App = () => {
  return (
    <div>
      <RedBox />
      <GreenBox />
      <BlueBox />
    </div>
  );
};

export default App;