컴포넌트 생성과 재사용

 

Hello 라는 컴포넌트를 생성해보자

 

 

---

 

Hello.js

 

// 컴포넌트 생성시 react 호출
import React from "react";

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

// 다른 컴포넌트에도 사용이 가능하도록
export default Hello;

 

---

App.js 에서 컴포넌트 호출

 

import './App.css';
import Hello from "./Hello";

function App() {

  return (
      <div>
          <h1>
              <Hello></Hello>
          </h1>
      </div>
  );

}

export default App;

 

결과

 

---

 

컴포넌트의 재사용

 

import './App.css';
import Hello from "./Hello";


function App() {

  return (
      <div>
          <h1>
              <Hello></Hello>
              <Hello></Hello>
              <Hello></Hello>
          </h1>
      </div>
  );

}

export default App;

 

 

결과