react - 개념

나에게도 다 계획(?)이 있다. 

오늘은 react의 개념만 간단하게 정리한 내용. 

리액트(react)란? 

1. 데이터를 업데이트 하면 전체 UI를 Virtual DOM에 리렌더링 합니다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다. 리액트는 데이터가 변활 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식(바뀐 부분만)

DOM(Document Object Model)에 대한 이해

Virtual DOM 에 대한 이해
핵심 : 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트 하는데 이 과정에서 시간이 허비 되는데 이를 보완하기 위해 DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선.

 

 

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

import { Fragment } from "react/jsx-runtime";
import { Component } from "react";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}