[React] 공식 문서 스터디 1-2. Importing and Exporting Components | 컴포넌트 import 및 export

목차
0. 시작하기
1. 루트 컴포넌트 파일
2. 컴포넌트 import 및 export 하기
3. 동일한 파일에서 여러 컴포넌트 imoprt 및 export 하기

 

 

0. 시작하기

• 컴포넌트 => 재사용성
• 컴포넌트를 여러 번 중첩 → 다른 파일로 분리해야 하는 시점이 온다
• → 나중에 파일 찾기 & 재사용 더 쉬움 !

💡학습 내용

• 루트 컴포넌트란 무엇인지
• 컴포넌트를 import하고 export하는 방법
• default 및 이름 있는 import / export 를 사용해야 하는 경우
• 하나의 파일에서 여러 컴포넌트를 import / export 하는 방법
• 컴포넌트를 여러 파일로 분할하는 방법

 

1. 루트 컴포넌트 파일

React의 루트(root)란?

• React 애플리케이션에서 모든 컴포넌트의 기반이 되는 최상위 컴포넌트
• React 애플리케이션의 진입점(entry point)이 되는 컴포넌트
• 보통 애플리케이션의 전체적인 구조를 정의하고 다른 하위 컴포넌트들을 렌더링함
• DOM에 렌더링 되는 최상위 컴포넌트

 

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>
  );
}

 

• Profile Gallery 컴포넌트들은 모두 App.js 라는 root 컴포넌트 파일에 존재
• 앱 전체가 src/App.js에서 실행됨
• 파일 기반 라우팅 프레임워크(ex. Next.js)에서는 페이지별로 root 컴포넌트가 다를 수 있다

 

2. 컴포넌트 import 및 export 하기

프로필을 다른 곳에 배치하거나 랜딩 화면을 변경하고자 한다면?

→ Gallery 와 Profile 을 root 컴포넌트 파일 밖으로 옮기는 것이 좋을 듯하다

👉 모듈성 강화 & 재사용 가능

 

컴포넌트 이동하기

1. 컴포넌트 넣을 js 파일 생성
2. 함수 컴포넌트 export 하기
3. 컴포넌트 사용할 파일에서 import 하기

// 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>
  );
}

 

• Gallery.js
  
  • Gallery 컴포넌트를 default export 방식으로 내보냄
  • Profile 컴포넌트
    • export 하지 않음
    • 이 파일에서만 사용
• App.js
  • Gallery.js 로부터 Gallery 컴포넌트를 default import방식으로 import 함
  • root App 컴포넌트를 default export 방식으로 export 함

Default vs named export

• 한 파일에서는 하나의 default export만 존재 가능
• named export는 여러 개 존재 가능

Syntax	Export statement	Import statement
Default	export default function Button() {}	import Button from './Buttonn.js';
Named	export function Button() {}	import { Button } from './Button.js';

 

3. 동일한 파일에서 여러 컴포넌트 import 및 export 하기

// Gallery.js
export function Profile() { // named export 방식
  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>
  );
}

// App.js
import Gallery from './Gallery.js';
import { Profile } from './Gallery.js'; // named import 방식

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

 

Profile 컴포넌트를 named export 방식으로 내보내기

• Gallery.js
  • Profile named export
  • Gallery default export
• App.js
  • Profile named import
  • Gallery default import
  • App defalut export (루트 컴포넌트)

 

---

https://react.dev/learn/describing-the-ui#importing-and-exporting-components

Describing the UI – React

해당 문서를 공부하며 작성하였습니다

피드백은 언제나 환영입니다 !