[리액트 19] 3편. React에서 자주 사용되는 객체
3편. React에서 자주 사용되는 객체
React에는 다양한 객체와 데이터 구조가 등장합니다. 2편에서 소개한 fiber tree나 WorkLoop의 time min-heap 자료구조인 task schedule queue가 그 예시들 입니다. 3편에서는 리액트가 시작되고 렌더링될때 까지 자주 등장하는 중요한 객체들을 패키지별로 정리해보려 합니다.
react 패키지는 ReactElement(리액트 엘리먼트)를 생성하는 필수 함수들과 API를 제공합니다. 예를 들면 다음과 같은 JSX 문법들은 모두 ReactElement를 생성하는 createElement로 Babel 플러그인에 의해 바뀝니다.
ReactDOM.createRoot(document.getElementById('root')).render(); // => React.createElement(App,{})
// React.createElement("div",null)
1.1 ReactElement
ReactElement 객체는 보통 JSX 문법이 React.createElement로 변환되어 생성됩니다.
export type ReactElement = {
$$typeof: any,
type: any, // 노드 종류 (일반 DOM 노드[div, span,...], 리액트 컴포넌트[함수형, 클래스형, Portal, Fragment,Provider,Consumer])
key: any, // diff 알고리즘에 사용(변경됐는지 확인)
ref: any,
props: any,
// or for string refs
_owner: ...
