[Describing The UI] Importing and Exporting Components

🌛 The root component file

---

이전 포스트에서 말했듯이, 보통의 React App에서는 root component가 존재하며 다른 component들은 root에 nested 되는 형태로 구현된다.

function SubBox() {
  return (
    <p>SubBox</p>
  );
}

export default function Box() {
  return (
    <section>
      <h1>Below are SubBox</h1>
      <SubBox />
      <SubBox />
      <SubBox />
    </section>
  );
}

이전에 다루었던 Box와 SubBox 예제이다. 실제 React App이라면, 아래와 같이, root component file인 App.js에 존재하는 root component에 Box component와 다른 필요한 component들이 nested 된다.

/* App.js */

function MyRoot() {
  return (
    <div>
      <Box />
      <MyComp1 />
      <MyComp2 />
    </div>
  ); 
}

🌝 Exporting and importing a component

---

특정 component를 nesting하여 사용하는 것은 reusability를 굉장히 높여준다. 그러나 SubBox와 Box 예제처럼 component를 nesting 하기 위해 하나의 파일에 모든 component를 넣는 것은 말이 되지 않는다.

이를 위해 React에서는 Export & Import를 통해 component간의 파일을 분리함과 동시에, 특정 파일에서 다른 파일의 component를 사용할 수 있다.

• Exporting component
Export할 component를 default or named export 한다.

/* 1. named export */
export function SubBox() {
  return (
    // ...
  );
}

/* 2. default export */
export default function Box() {
  return (
    // ...
  );
}

🚨 잠재적 실수를 줄이기 위해, 실제 개발 시 하나의 파일에서는 default export와 named export 중 하나만을 선택해서 사용하는 경우가 있다

• Importing component
두 타입의 export에 맞춰 export된 component를 사용할 파일에서 import한다.

import Box, { SubBox } from './Box.js';

function MyRoot() {
  return (
    <div>
      <Box />
      <SubBox />
    </div>
  ); 
}

Box와 SubBox component의 export 방식이 다르므로, import 방식 역시 다름을 인지하자.

🚨 React의 경우 import시 .js extension의 생략이 가능하지만, 생략하지 않는 것이 native ES Module 방식에 가깝다