[React 까보기 시리즈] React component가 return하는 html은 babel을 만나서 어떻게 변할까? (createElement 함수 까보기)

https://www.youtube.com/watch?v=FZyZVwbaLIA

 

React component가 return 하는 html이 객체다? 

JSX -> React element -> fiber(VDOM에 올라가기 위해 필요한 정보들을 포함) 

 

React.createElement() 

babel을 통해 JSX -> React element 

createElement(type, config, child1, child2, child3 ...childN) 

- type

      - host component: tag(HTML element) 이름 

      - custom component: 작성한 함수 

      - static component: 미리 정의된 Symbol 또는 memo, lazy와 같이 함수 호출로 return한 React element 

- config 

      - props(ref, key, ...)

 - children(child1, child2, child3 ...)

      - 자식 컴포넌트들 

React element 만드는 과정(createElement 함수 까보기) 

1. React element에는 key와 ref라는 예약된 props가 있음. 이를 제외한 나머지를 props 객체에 저장

2. 여러 자식이 오면 배열에 저장 

3. default props가 존재하면 props 객체에 적용

4. 위 정보로 React element 생성