P1. useState

• useState는 React에서 state를 등록 및 관리하는 훅이다.
• state는 useState 훅에 의해서만 update 되는 이유는 react rendering process 때문 입니다.

P2. React Rendering

Step 1: Trigger a Render

• 컴포넌트는 다음 2가지 이유로 렌더링 된다.
• ① 컴포넌트의 초기 렌더링
• ② 컴포넌트(상위 컴포넌트)의 상태(State)가 업데이트된 경우

(1) Initial Render

• 앱이 시작되면 초기 렌더링을 트리거해야 합니다.
• 초기 렌더링은 Target DOM Node와 함께 createRoot를 호출한 다음, Component(구성요소)를 인수로 하여 Render 메서드가 호출된다.

import Component from './Component.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<Component />);

(2) Re-renders when state update

• 컴포넌트가 성공적으로 초기 렌더링 된 이후에, "set function"함수를 호출하여
  상태(State)를 업데이트 함으로써 다음 렌더링을 트리거(Trigger)할 수 있습니다.
• 상태(State)가 업데이트 된 컴포너넌트는 렌더링을 자동으로 대기합니다.

Step 2: React renders your Components

• 렌더를 트리거(Trigger)한 후, React는 화면에 무엇을 표시해야 하는지 이해하기 위해 컴포넌트를 호출 합니다.
• "Rendering"은 React가 Components를 호출하는 것입니다.
• 그리고 다음 단계인 Commit 단계 까지는 절대로 계산된 정보를 사용하지 않습니다.

Step 3: React commits changes to the DOM

After rendering(calling) your components, React는 DOM을 수정합니다.

• For the initial render
  Initial 렌더의 경우, React는 appendChild() DOM API 사용하여, 생성한 모든 DOM 노드를 화면에 표시합니다.

• For re-render
  Re 렌더의 경우, React는 DOM이 가장 최근의 렌더링 결과물과 일치하도록 필요한 최소한의 작업(렌더링 중 계산된)을 적용(Apply)합니다.

React Render Phase vs Commit Phase

P3. JavaScript

• useState를 javaScript에서는 다음과 같이 구현할 수 있습니다.

1. JavaScript

function useState(initialState) {
  let value = initialState;
  function state() {
    return value;
  }
  function setState(newState) {
    value = newState;
  }
  return [state, setState];
}

2. 클로저

• 클로저란 JavaScript의 특성에 따라 발생하는 현상으로, 함수와 해당 함수가 선언된 렉시컬 환경과의 조합에 의해 발생하는 현상이다.
• useState는 JavaScript 클로저의 원리에 따라 작동하는 react Hook 이다.