1. React

React

  Component를 이용해 복잡한 HTML 파일을 간결하고 획기적으로 표현 가능한 JS 라이브러리.

 

React를 사용하지 않은 경우

<header>
  <h1>Logo</h1>
</header>
<nav>
 <ul>
   <li><a href="#">메뉴1</a></li>
    <li><a href="#">메뉴2</a></li>
 </ul>
</nav>
 <section>
  <p>Hello World!</p>
</section>

React를 사용한 경우

(아래 코드만 얼핏 보면 이걸 왜 사용하지? 각 태그를 부품화 하여 얻어지는 장점이 굉장히 많다.)

생산성, 유지보수, 가독성

import React, {Component} from 'react';

class Hlogo extends Component{
  render(){
    return (
    <header>
      <h1>Logo</h1>
    </header>
    )}};

class Anav extends Component{
  render(){
    return (
    <nav>
      <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
      </ul>
    </nav>
    )}};

class Bsection extends Component{
  render(){
    return (
    <section>
      <p>{this.props.amumal}</p>
    </section>
    )}};

class App extends Component{
  render(){
    return (
      <div className="App">
        <Hlogo></Hlogo>
        <Anav></Anav>
        <Bsection amumal="Hello World!"></Bsection>
      </div>
    )}};

export default App;

 

VirtualDOM

React는 virtualDOM이라는 개념을 도입하여 기존 페이지에서 변경된 부분만 실제 DOM에 적용한다.

 

 

코드 출처: 나무위키