[React] export와 export default의 차이

 

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;