[문서] 리액트 공식문서 톱아보기: 컴포넌트 import 및 export

1. 컴포넌트 import 및 export

 JavaScript의 import, export 문법을 사용하여 컴포넌트를 다른 파일에서도 불러와 사용할 수 있다.

컴포넌트의 가장 큰 장점 = 재사용성

 

리액트는 한번 만든 컴포넌트를 조합해 어디서든 쓸 수 있다.

// Button.jsx
export default function Button({ label }) {
  return <button>{label}</button>;
}

이렇게 만든 버튼 컴포넌트를 다른 컴포넌트 안에 넣어 조합해 새로운 컴포넌트를 만들 수 있다.

// App.jsx
import Button from './Button';

export default function App() {
  return (
    <div>
      <h1>메인 페이지</h1>
      <Button label="클릭!" />
    </div>
  );
}

 

다른 파일에서 모듈(컴포넌트)를 가져올때 import/export 문법을 사용한다.

2. Default와 Named Exports의 차이는?

출처: https://ko.react.dev/learn/importing-and-exporting-components 리액트공식문서

1. 기본 내보내기 (export default)

• 파일당 하나의 컴포넌트를 주로 기본으로 내보냄
• 가져올 때 이름은 마음대로 정해도 됨

export default function Header() {}

import Header from './Header'; //정석으로 하면 이렇게 가져오지만
import 내맘대로 from './Header'; //어차피 하나의 파일을 가져오기때매 이름은 맘대로 설정 가능

2. 이름 기반 내보내기 (export)

• 여러 개의 컴포넌트를 한 파일에서 내보낼 때 사용
• 불러올 때 반드시 같은 이름을 써야 함

export function Header() {}
export function Footer() {}

import { Header, Footer } from './Layout'; //명명한 이름 그대로 가져와야함

 

보통 하나의 파일에서 컴포넌트 하나만 내보낼 땐 default export를 쓰고

반대로 여러 개를 한 파일에서 내보낼 땐 named export를 쓴다.

 

export default () => {} 처럼 이름 없는 컴포넌트는 나중에 디버깅하기 어려우니 비추!