React_API

ReactDOM

ReactDOM.createRoot()

const root = createRoot(domNode, options?)
-----------------------------------------------
import App from './App'
...
const container = document.getElementByID('root');
const root = createRoot(container);
root.render(<App />)

의 형태로 쓰인다.

• container는 id가 root인 DOM요소를 가리키는 노드이다.
• root는 해당 노드에 대한 root를 생성하며 DOM에 대한 관리권한을 가져온다.
  → Root는 React Virtual DOM tree의 최 상위 노드인 root노드를 의미한다.
• 이후에 root의 render()메서드를 이용하여 해당 DOM을 렌더링한다.
  → render()는 JSX(리액트 노드)들을 출력해주는 함수다.

(앱이 SERVER-RENDERED라면 hydrateRoot()를 사용하라고 한다. ← 이거 나중에 알아봐야겠다.).

---

React onClick

<a 
  href="/"
  onClick{function (e) {
    console.log(e);
    debugger;
    alert( 'Hi' );
  }
>
  TITLE
</a>

이렇게 a태그를 클릭 할 때, 실행할 함수를 만드는 과정에서 e라는 event객체가 전달된다.