[react]기초

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리다. 컴포넌트라는 작은 코드 조각을 사용하여 복잡한 UI를 쉽게 구성할 수 있다.

Facebook에서 개발하였고, 컴포넌트 기반의 개발을 가능하게 한다.

React는 컴포넌트(Component), props, state 등의 개념을 중심으로 이루어져 있고 이를 통해 데이터가 변할 때마다 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 한다.

React를 사용하기 위해서는 npm이 필요하다. 

Node.js — Download Node.js®

import React, { useState } from 'react';
import './App.css';

function App() {
  // 상태(state)와 이를 업데이트하는 함수를 선언합니다.
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <header className="App-header">
        <p>당신이 버튼을 클릭한 횟수는 {count}번입니다.</p>
        <button onClick={() => setCount(count + 1)}>
          클릭하세요
        </button>
      </header>
    </div>
  );
}

export default App;

useState 훅을 사용하여 컴포넌트의 상태를 관리하는 방법을 보여주고 있다. 사용자가 버튼을 클릭할 때마다 count 상태가 업데이트되고, 이는 화면에 실시간으로 반영된다. React는 선언적이기 때문에, 우리는 어떤 상태에서 UI가 어떻게 보여져야 하는지를 선언하고, React가 이를 실제 DOM에 반영하도록 한다.

 

React는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링한다.

그리고 나서 React에서 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜준다.