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;
'Front-End > React' 카테고리의 다른 글
[React] react-router-dom: React에서 페이지 이동 (0) | 2021.10.18 |
---|---|
[React] JSX에서 if, for(map) 사용하기(JavaScript) (0) | 2021.10.17 |
[React] Props 기초 (0) | 2021.10.17 |
[React] state 개념과 useState 사용 (0) | 2021.10.17 |
[React] 시작하기(Requirements, Create React App) (0) | 2021.10.03 |