4. 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;

서로 연관된 것을 모아서 이름 붙이기

복잡한 태그를 하나로 묶어서 사용자 정의 태그 만들기

React에서 사용자 정의 태그를 만들 때는 대문자로 시작

React에서는 사용자 정의 태그를 Component 로 지칭

Component 적용 예

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;

동일한 결과를 나타내지만 코드가 깔끔해지고, 동시 수정되는 효과를 누릴 수 있음

생산적 기능 향상