리액트는 왜 쓰는 걸까

컴포넌트 단위 작성

UI를 구성하는 개별적인 뷰 단위로, 필요한 컴포넌트를 여러 부분에서 사용할 수 있게 한다.
--> 생산성과 유지 보수를 용이하게 한다.

예시)

import React from "react";
import logo from "./logo.svg";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  );
};

export default App;

DOM(Document Object Model)

웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델.
즉 DOM은 HTML과 JS를 이어주는 역할을 한다.

DOM이 느리다는 오해를 하는 경우가 있는데, DOM 자체가 느린 게 아니라 DOM에서 변화가 일어났을 때 웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 렌더링하는 과정이 시간을 소비하는 것이다.

가상 DOM

리액트는 Virtual DOM이라는 DOM을 추상화한 JS 객체, 일종의 사본을 이용한다.

• 데이터가 업데이트되면 가상 DOM을 리렌더링하고
• 이전의 가상 DOM의 내용과 현재 내용을 비교하여
• 바뀐 부분만 실제 DOM에 적용된다.
  

리액트를 다루는 기술

https://velog.io/@devgosunman/series/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EB%8B%A4%EB%A3%A8%EB%8A%94-%EA%B8%B0%EC%88%A0-The-Art-Of-React