React 찍먹

#React 공부하기

##리액트의 장점

아래 코드 처럼 복잡한 태그의 집합인 HTML보다 효율적으로 사용자 정의 태그기반의 웹페이지 구현이 가능하다.

이때 표현하는 사용자 정의 태그의 의미는 컴포넌트를 의미한다.

 

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;

 

 

import logo from './logo.svg';
import './App.css';
import { func } from 'prop-types';
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>
    <Header>
    </Header>
    <Header>
    </Header>
    <Nav></Nav>
    <Nav></Nav>
    <Nav></Nav>
    <Article/>
    <Article/>
    <Article/>
    <Article/>

    </div>
  );
}

export default App;

 

위 그림처럼 사용자 정의로 컴포넌트를 생성하면 여러개의 컴포넌트를 한번에 코드로 렌더링할 수 있고 이렇게 구조화 된 웹은

코드 재사용율이 높은 웸 개발에서 생산성을 향상시켜주는 매우 큰 장점이 있다.