[REACT] Components Import & Export - 공식 문서랑 같이 공부하기 시리즈2

-목차-

[1] ROOT Component란?

[2] 컴포넌트 Export & Import 하기

[3] 같은 파일에서 컴포넌트 여러 개를 Export & Import 하기

Root Component란

개인 환경마다 다르겠지만, 보통 Root Component는 App.js 파일이다. create-react-app으로 실행할 경우 앱이 실행되는 지점은 App.js라고 보면 된다. 만약에 Next.js처럼 파일 기반으로 라우팅하는 경우라면 페이지별로 root 컴포넌트가 다를 수 있다. (Next.js를 안 써봐서 정확하게 와닿지는 않는다.)

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

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

컴포넌트 Export & Import 하기

첫 번째 예시를 분리한다면 아래처럼 분리할 수 있다.

 

import Gallery from './Gallery.js';
    export default function App() {
      return (
        <Gallery />
      );
}

 

1. Gallery.js 라는 이름의 파일을 생성한 뒤, Profile 컴포넌트와 Gallery 컴포넌트 모두 이쪽으로 옮긴다. 

Gallery.js에서 Profile컴포넌트는 내부에서만 사용되며, export 되지 않는다. 즉, Gallery.js 파일 밖에서는 사용할 수 없다는 뜻이다. 그리고 Gallery 컴포넌트를 default export 로 지정한다.

2. 루트 컴포넌트에서 Gallery.js를 import 해서 App 컴포넌트 내부에서 사용한다. 

이때 import Gallery from './Gallery.js'와 같이 사용되기도 하고, import Gallery from './Gallery' 와 같이 확장자가 없을 수도 있다. React에서는 두 경우 모두 허용하지만, 전자가 ES Modules 사용 방법에 더 가깝다. (확장자 생략이 가능한 이유는 create-react-app으로 프로젝트를 시작했을 경우 기본적으로 환경설정이 되어있기 때문이다.)

** Default export와 Named exports 두 가지 방법의 export가 있다. 아래 세 가지 조합으로 export를 사용할 수 있다. (자세한 설명은 접은 글 참조)

https://react.dev/learn/importing-and-exporting-components

보통 하나의 컴포넌트에 하나의 default export만을 사용하거나(One default export), 여러 컴포넌트를 export할 경우에는 default export 없이 named export만으로 구성하는 방식을 사용한다. (Multiple named exports) 어떤 방식을 사용하든 컴포넌트와 파일 이름을 잘 짓는 것이 중요하다.

 

같은 파일에서 컴포넌트 여러 개를 Export & Import 하기

위 예시 Gallery.js에서는 Profile을 export하지 않았지만 named export할 수 있다.

export function Profile() { ... }

그 다음 App.js에서 다음과 같이 import 하고 사용하면 된다.

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

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