컴포넌트 사용

 

 

App.js

import "./App.css";

function App() {
  return (
    <div>
      <OurHeader />
      <TimeArea />
      <Footer />
    </div>
  );
}

function OurHeader() {
  return <h1>처음 앱</h1>;
}

function TimeArea() {
  return <p>현재 시간 : {new Date().toLocaleString()}.</p>;
}

function Footer() {
  return <small>Copyright Footer Text</small>;
}

export default App;

 

재 사용 가능한 컴포넌트로 됨. 

 

 

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
setInterval(function () {
  root.render(<App />);
}, 1000);

 

시간 바뀜 

 

 

재사용이 가능하므로 여러번 사용이 가능하다.

 

 

\

 

 

props를 통해 컴포넌트에 값을 전달 할 수 있다. 

 

 

 

 

 

예제

 

 

import "./App.css";

function App() {
  return (
    <div>
      <OurHeader />
      <TimeArea />
      <ul>
        <Pet name="라이언" species="cat" age="5" />
        <Pet name="울버린" species="dog" age="2" />
        <Pet name="토끼" species="rabbit" age="3" />
      </ul>
      <Footer cr="부산IT교육센터" />
    </div>
  );
}

function OurHeader() {
  return <h1>처음 앱</h1>;
}

function TimeArea() {
  return <p>현재 시간 : {new Date().toLocaleString()}.</p>;
}

function Footer(props) {
  return <small>Copyright : {props.cr}</small>;
}

function Pet(props) {
  return (
    <li>
      {props.name}은 {props.species}이고 {props.age}살 이다.
    </li>
  );
}

export default App;