[React 공부] 1-2. 컴포넌트 가져오기 & 보내기

 

Importing and Exporting Components – React

 

 

 

---

 

 

 

Component의 장점은 재사용 가능성

점점 복잡해 질수록 다른 파일로 나눠야되는 상황 생김

 

Root 컴포넌트

 

1.1에서 다뤘던 Gallery 그리고 Profile Function들이다

이는 현재 App.js라는 Root 컴포넌트에 배치되어 있다

나중에 Next.js 같은 프레임워크를 사용하게 되면 페이지 마다 Root 컴포넌트가 달라질 상황도 생긴다

function Profile() {
  return (
    <img
      src="someSrc"
      alt="someAlt"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>그냥 대충 아무 제목</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

 

 

 

---

 

 

 

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

 

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

 

 

App.js가 Root 컴포넌트라고 한다면 최대한 불필요한 요소들을 제거하고 다른 파일에 옮기는게 좋다

이는 App.js가 컴포넌트 로직을 깔끔하게 구성되는데에 있어 편리하기 때문이다

 

 

 

App.js에서 Gallery를 불러오기 위한 세부 요소는 다음 줄이 핵심이다:

import Gallery from './Gallery.js';

 

• App에서 Gallery를 보기 위해서는 export default가 있어야 된다 (다른 export가 없다면)
  • export default function Gallery()로 Gallery를 만들어서 App에서 보이게 만들었다
• 이를 통해 App에서 Gallery의 위치를 파악해서 불러온다

 

 

---

 

 

 

Default Export V.S. Named Export

 

사실 React는 다른 방식으로 export를 할 수 있는데 이는 Named Export이다

 

 

설명하기 앞서 알아야될 부분은:

• 파일당 default export는 한개만 사용 가능하다
• named export은 원하는 만큼 언제든 사용 가능하다

사용하는 방식은 다음 차트와 같다:

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

 

※ 유의 ※

• default import는 가져오는 파일에서 이름을 변경할 수 있다
  • import Zenu from './Button.js' 또는 import ANYTHING from './Button.js' 처럼 이름 변경이 가능하다
• named import은 언제나 보내는 파일 & 가져오는 파일의 이름이 같아야 된다

 

 

---

 

 

 

같은 파일에서 여러가지 컴포넌트를 Export/Import하기

 

 

위에 Named Export을 사용하는 예시를 함께 봐볼 생각이다

 

 

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를 통해서 Profile을 화면에 보여주는 방식을 사용하지 않고

App에서 직접 Profile을 가져와 사용하는것을 확인할 수 있다

 

• Gallery.js:
  • Profile 컴포넌트를 named export로 보낸다
  • Gallery 컴포넌트를 default export로 보낸다
• App.js:
  • Profile을 named import으로 받는다.
  • Gallery를 default import으로 받는다
  • App component를 default export로 보낸다 (랜더링하는 부분으로)