[ React 기초 ] 렌더링 요소,

DOM에 요소 렌더링

1. 내부의 모든것은 react DOM에 의해 관리되어 "루트" DOM 노드라고 부른다.
2. 리액트 요소를 렌더링하면서 먼저 DOM요소를 ReactDOM.createRoot()에 전달하고
   root.render()에 전달한다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

렌더링된 요소 업데이트

react 요소는 변경할 수 없다. UI업데이트를 하는 유일한 방법은 새 요소를 만들어
root.render() 전달한다.

• root.render() 한 번만 호출한다

필요한 것만 업데이트하는 React

React DOM은 요소와 그 자식을 이전 요소와 비교하고 DOM을 원하는 상태로 가져오는 데 필요한 DOM 업데이트만 적용합니다.

참고자료

• 개인공부를 위해 자료를 정리하고 참고해보았습니다.
  https://reactjs.org/docs/rendering-elements.html