React란

React 컴포넌트 만들기

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

function App() {
  return (
    <div className="App">
     <header>
        <h1><a href="/">WEB</a></h1>
     </header>
     <nav>
        <ol>
          <li><a href="/">html</a></li>
          <li><a href="/">css</a></li>
          <li><a href="/">js</a></li>
        </ol>
     </nav>
     <article>
       <h2>Hello, WEB</h2>
     </article>
    </div>
  );
}

상상력을 발휘하여 <header>, <nav>, <article> 태그 안에 있는 코드가 위에 있는 코드처럼 3~4줄이 아니라 1만 줄이 있다고 생각해 보자. 이 코드를 한눈에 알아보기 힘들 뿐만 아니라 코드를 수정해야 되는 순간이 온다면, 일일이 수정하기가 현실적으로 불가능하다.

React는 이러한 불편함을 개선하기 위해 아래 코드와 같이 사용자 정의 태그(컴포넌트)를 사용하기 위해 나타났다.

즉 여러 줄의 코드를 대신하는 컴포넌트를 만들어 아래 코드와 같이 간단하게 작성할 수 있다.

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="/">html</a></li>
      <li><a href="/">css</a></li>
      <li><a href="/">js</a></li>
    </ol>
  </nav>
}

function Article(){
  return <article>
    <h2>Hello, WEB</h2>
  </article>
}


function App() {
  return (
    <div className="App">
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;