[React] 컴포넌트 만들기(사용자 정의 태그)

React = 사용자 정의 태그를 만드는 것
컴포넌트 = 사용자 정의 태그

 

1. 컴포넌트(=사용자 정의 태그) 만드는 법

태그를 함수로 만들어서, return 값에 태그 내용을 써넣는다.

이 때 컴포넌트는 대문자로 시작해야한다

 

사용자 정의 태그를 만들기 전

사용자 정의 태그를 만든 후

컴포넌트를 만들어 사용하면, 해당 컴포넌트를 사용하는 모든 곳에 한 번에 수정을 할 수 있게 된다.

 

 

2. 사용한 전체 코드

import logo from "./logo.svg";
import "./App.css";
function Header(props) {
  return (
    <header>
      <h1>
        <a href="/">{props.title}</a>
      </h1>
    </header>
  );
}

function Nav() {
  return (
    <nav>
      <ol>
        <li>
          <a href="/read/1">html</a>
        </li>
        <li>
          <a href="/read/2">css</a>
        </li>
        <li>
          <a href="/read/3">js</a>
        </li>
      </ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

App.js