[React] component

💡 컴포넌트 만들기

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <header>
        <h1><a href="/">WEB</a></h1>
      </header>
      <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>
      <article>
        <h2>Welcome</h2>
        Hello, Web!
      </article>
    </div>
  );
}

export default App;

# header를 컴포넌트로 만들기

• 함수 정의하기
• 소문자<header>는 html에 기본적으로 내장된 태그
• React에서 컴포넌트 만들땐 대문자로 시작

import logo from './logo.svg';
import './App.css';

function Header () {
  return (
  <header>
    <h1><a href="/">WEB</a></h1>
  </header>
  )
}

function App() {
  return (
    <div>
      <Header></Header>
      <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>
      <article>
        <h2>Welcome</h2>
        Hello, Web!
      </article>
    </div>
  );
}

export default App;

# 다른 태그도 컴포넌트로 만들기

import logo from './logo.svg';
import './App.css';

function Header () {
  return (
  <header>
    <h1><a href="/">WEB</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 () {
  return (
    <article>
      <h2>Welcome</h2>
      Hello, Web!
    </article>
  )
}
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

✨ 끝 !

✦ 출처 : 생활코딩 [React 2022년 개정판]