1. 다른 파일에서 가져오기

Potato.js를 만들기

src
├── App.js
├── Potato.js
└── index.js

Potato.js

import React from "react";

function Potato() {
    return <h3>I love Potato</h3>;
}

export default Potato;

App.js

import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <Potato />
    </div>
  );
}

export default App;

⇒ 이렇게 하면 결과가 나옴

2. 같은 파일에서 가져오기

Potato.js 지우기

src
├── App.js
└── index.js

App.js 수정

import React from 'react';

function Potato() {
  return <h1>I like Potato</h1>
}

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <Potato />
    </div>
  );
}

export default App;