[React] 공식문서 공부 - Component의 export 와 import

리액트에서 컴포넌트를 만들고 다른 곳에서 사용하려면 컴포넌트를 export 하고

사용하려고 하는 파일에서 컴포넌트를 import 해야 됩니다.

| Default

컴포넌트를 export 하는 방법에 default로 하는 방법이 있는데

이는 하나의 파일에서 하나의 컴포넌트를 보내고 싶을 때 사용하면 됩니다.

1. export

export default 키워드를 사용하면 됩니다.

export default function MyComponent() {
  return <div>Hello, World!</div>;
}

OR

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

2. import

import를 하려면 import키워드를 사용해 다른 파일에 있는 컴포넌트를 가져올 수 있습니다.

import 사용하고싶은 이름 from "export한 파일 경로"

이런 식으로 사용하면 됩니다.

import MyComponent from "./MyComponent";

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

| Named

컴포넌트를 named export 할 수도 있는데

이는 하나의 파일에서 여러 개의 컴포넌트를 export 하고 싶을 때 사용하면 됩니다.

1. export

단순히 컴포넌트 앞에 export 키워드를 붙여서 사용하면 됩니다.

export function MyComponent1() {
  return <div>Hello, World!</div>;
}

export function MyComponent2() {
  return <div>Hello, React!</div>;
}

2. import

named로 export 한 컴포넌트를 import 할 때는 중괄호를 꼭 같이 입력해야 됩니다.

import { 컴포넌트이름, 컴포넌트이름 } from "export한 파일 경로";

import { MyComponent1, MyComponent2 } from "./MyComponent";

function App() {
  return (
    <div>
      <MyComponent1 />
      <MyComponent2 />
    </div>
  );
}

그리고 원하는 이름으로 import 하고 싶으면 as키워드를 사용해야 합니다.

import { 컴포넌트이름 as 원하는컴포넌트이름, 컴포넌트이름 as 원하는컴포넌트이름 } from "export한 파일 경로";

import { MyComponent as Component1, MyComponent2 as Component2 } from "./MyComponent";

function App() {
  return (
    <div>
      <Component1 />
      <Component2 />
    </div>
  );
}