React .03 : UI 이해하기 - Component 가져오기와 내보내기

본 글은 React 공식문서를 정리 한 글입니다. 
더 자세한 내용은 https://react.dev/을 참고하시길 바랍니다.

 컴포넌트의 강점은 재사용 가능성에 있습니다. 즉, 다른 컴포넌트로 구성된 컴포넌트를 만들 수 있습니다. 그러나 점점 더 많은 컴포넌트를 중첩할수록 컴포넌트를 다른 파일로 분할하는 것이 합리적일 때가 많습니다. 이를 통해 파일을 쉽게 스캔하고 더 많은 위치에서 컴포넌트를 재사용할 수 있습니다. 여기서 우리는 다음과 같은 내용을 배웁니다.

• 루트 컴포넌트 파일이란 무엇인지
• 컴포넌트를 가져오고 내보내는 방법
• default 및 named 가져오기 및 내보내기를 사용하는 경우
• 컴포넌트를 내보내는 방법과 하나의 파일에서 여러 컴포넌트를 가져오는방법
• 컴포넌트를 여러 파일로 분할하는 방법

루트 컴포넌트 파일

 컴포넌트 이해하기에서 Profile구성 요소와이를 렌더링하는 Gallery 구성 요소를 만들었습니다. 이들은 현재 이 예에서 App.js로 명명된 루트 컴포넌트 파일 에 있습니다. 하지만 설정에 따라 루트 구성 요소가 다른 파일에 있을 수도 있습니다. Next.js와 같은 파일 기반 라우팅이 포함된 프레임워크를 사용하는 경우 루트 구성 요소는 페이지마다 다릅니다.

컴포넌트 내보내기 및 가져오기

 나중에 랜딩 화면을 바꿔 과학도서 목록을 넣고 싶을때나 모든 프로필을 다른 곳에 배치하고 싶다면  Gallery 와 Profile 컴포넌트를 루트 컴포넌트 파일을  밖으로 내보내는 것이 좋습니다. 이렇게 하면 더 모듈화되고 다른 파일에서 재사용이 가능해집니다. 다음 세 단계로 구성요소를 이동할 수 있습니다.

1. 컴포넌트를 넣을 새 JS 파일을 만듭니다 .
2. 해당 파일에서 함수 구성 요소를 내보냅니다 ( 기본 내보내기(default) 또는 명명된(named) 내보내기 사용).
3. 구성 요소를 사용할 파일로 가져옵니다 ( 기본(default) 또는 명명된(named) 내보내기 가져오기에 해당하는 기술 사용).

여기서 Profile 및 Gallery  컴포넌트 둘 다 Gallery.js 이라는 새 파일로 이동되었습니다. 이제 다음에서 가져오도록 변경할 수 있습니다 

// App.js 파일
import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

// Gallery.js 파일

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

이제 이 예제가 두 개의 컴포넌트 파일로 어떻게 구분되는지 확인하세요.

1. Gallery.js:
   • 동일한 파일 내에서만 사용되며 내보내지지 않는 Profile 컴포넌트를 정의합니다 .
   • Gallery 컴포넌트를 기본 내보내기로 내보냅니다 .
2. App.js:
   • Gallery.js 에서 Gallery컴포넌트를 기본 가져오기(default)로 가져옵니다 .
   • 루트 App 컴포넌트를 기본 내보내기(default)로 내보냅니다 .

• 다음과 같이 .js 파일 확장자가 없는 파일이 나타날 수 있습니다.
  './Gallery.js'또는'./Gallery' 는 React와 함께 작동하지만 전자가 기본 ES 모듈이 작동하는 방식에 더 가깝습니다.

import Gallery from './Gallery';

심화개념 : Default vs named exports

 JavaScript를 사용하여 값을 내보내는 두 가지 주요 방법은 기본 내보내기 default exports와 명명된 내보내기named exports입니다. 지금까지 예제에서는 기본 내보내기만 사용했습니다. 그러나 동일한 파일에서 둘 중 하나 또는 둘 다를 사용할 수 있습니다. 파일에는 기본 내보내기가 하나만 있을 수 있지만 이름이 지정된 내보내기는 원하는 만큼 많이 가질 수 있습니다.

 구성 요소를 내보내는 방법에 따라 가져오는 방법이 결정됩니다. 명명된 내보내기와 동일한 방식으로 기본 내보내기를 가져오려고 하면 오류가 발생합니다! 이 표는 다음을 추적하는 데 도움이 될 수 있습니다.

문법	Export statement	Import statement
Defualt	export default function Button() {}	import Button from './Button.js';
Named	export function Button() {}	mport {Button} from './Button.js';

 기본 가져오기를 작성할 때 import 뒤에 원하는 이름을 넣을 수 있습니다 . 예를 들어, 위의 예시 대신  import Banana from './Button.js'을 쓸 수 있으며 여전히 동일한 기본 내보내기가 제공됩니다. 대조적으로, 명명된 가져오기의 경우 이름이 양쪽에서 일치해야 합니다.

 파일이 하나의 구성 요소만 내보내는 경우 사람들은 종종 기본 내보내기를 사용하고, 여러 구성 요소와 값을 내보내는 경우 명명된 내보내기를 사용합니다. 선호하는 코딩 스타일에 관계없이 항상 구성 요소 기능과 이를 포함하는 파일에 의미 있는 이름을 지정하세요. export default () => {} 와 같이 이름이 없는 구성 요소는 디버깅을 더 어렵게 만들기 때문에 권장되지 않습니다.

동일한 파일에서 여러 컴포넌트 내보내기 및 가져오기

 gallery가 아닌 Profile 하나만 보여주고 싶다면  Profile 컴포넌트를 내보낼 수도 있습니다. 그러나 Gallery.js는 이미 기본 내보내기가 있으므로 두 개의 기본 내보내기를 가질 수 없습니다 . 새 파일 생성하여 default imports를 사용하거나 Profile 컴포넌트를 named exports로 내보낼 수 있습니다.  파일에는 기본 내보내기가 하나만 있을 수 있지만 명명된 내보내기는 여러 개 있을 수 있습니다.

• 기본 내보내기와 명명된 내보내기 간의 잠재적인 혼동을 줄이기 위해 일부 팀에서는 하나의 스타일(기본 또는 명명된)만 고수하거나 단일 파일에서 혼합하지 않도록 선택합니다. 당신에게 가장 적합한 일을 하세요.

먼저 named exports 를 사용하여 Profile 컴포넌트를 Gallery.js에서 내보냅니다.

export function Profile() {
  // ...
}

 그후, named import 를 사용하여 Gallery.js으로부터 Profile컴포넌트를 가져옵니다.

import { Profile } from './Gallery.js';

마지막으로 <Profile />를 App 컴포넌트에 렌더링합니다.

export default function App() {
  return <Profile />;
}

이제 Gallery.js 에서 default export Gallery와 named export Profile라는 두 가지 내보내기가 포함됩니다. App.js은 둘 다 가져옵니다.

// App.js 파일

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

// Gallery.js

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

이제 기본 내보내기와 명명된 내보내기를 혼합하여 사용하고 있습니다.

• Gallery.js:
  • Profile 컴포넌트를  named export 로 내보냅니다 .
  • Gallery 컴포넌트를 default export 로 내보냅니다 .
• App.js:
  • Profile 컴포넌트를 Gallery.js에서 named import 로 가져옵니다
  • Gallery 컴포넌트를 default import로 가져옵니다
  • 루트 App 컴포넌트를 default export로 내보냅니다.

과제 답안

// App.js 파일

import Gallery from './Gallery.js';
import Profile from './Profile.js';

export default function App() {
  return (
    <div>
      <Profile />
    </div>
  );
}

// Gallery.js 파일

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

// Profile.js 파일

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}