리액트에서 렌더링이란?

<aside> 💡 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미한다.

</aside>

기본적인 리액트의 렌더링 개념은 루트 <div id="root"></div> DOM부터 시작해 플래그가 지정되어 있는 모든 컴포넌트를 찾아서 렌더링을 진행하는 것.

• root id는 public/index.html에 CRA 세팅을 하면 기본적으로 설정이 되어있다.
• DOM은 HTML parser에 의해 생성된 트리 구조의 Node 객체 모델입니다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

기본적으로 리액트의 렌더링은 이러한 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, 그 React Element를 root.render()에 전달하는 과정을 거친다.

단방향 데이터 바인딩

React의 흐름은 부모 -> 자식 으로 이어지기 때문에 단순 하다. 이러한 점은 디버깅하는 데 있어 편리함을 갖고있으며, 전체적인 흐름을 이해하는데 상당히 좋은 부분임.

BUT. 전역적으로 관리가 필요한 데이터가 존재한다면, 상태관리 라이브러리들을 사용해야 한다.

JSX

<aside> 💡 React에서만 사용되고 React에서 새로 도입된 JS 문법

</aside>

→ JSX 문법은 결국 Babel과 같은 트랜스파일러를 통해 Javascript 문법(함수)로 바뀌어 사용되는 것.

<div className='first'>
  First
</div>
  
  ↓

React.createElement(
  'div',
  { className: 'first' },
  'First'
);

→ JSX 문법은 결국 함수를 호출을 통해 Element를 생성하는 코드로 변경된다.

= JSX는 실제 DOM에 렌더링 된다.

Virtual DOM

<aside> 💡 Virtual DOM은 DOM과 유사하지만 DOM이랑은 React에서 제공하는 가상의 DOM

</aside>

Virtual DOM이 DOM과 다른점?