기술공부/React

[React] 01. React.CreateElement

mmmlee 2021. 12. 8. 22:36

React

  • 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React.createElement()

  • jsx는 사실상 react.createElement()를 호출하기 위한 슈가 문법
  • React.createElement(
      type,
      [props],
      [...children]
    )
    type의 인자로를 div와 span 같은 tag가 와도 되고, React Component, React Fragment 타입이 올수 있다.
  • props에는 보통 attribute를 넣어준다.
  • children은 자식요소를 넣어주는거로, 문자열일수도 있으며, 컴포넌트일수도 있다.
  • 그리고 children을 props의 객체로 넣어줘도 가능하다.
  • 만약 props를 통해 children Component에 data를 넘겨주고 싶으면, function으로 만들어 놓던지 아니면 class형태로 만들어서 쓰면 된다.
  • 자세한 예제는 https://reactjs.org/docs/react-without-jsx.html
  • https://reactgo.com/react-createelement-example/ 를 쓰면 된다.

JSX 를 주로 사용하지만, JSX의 기본이 되는 React.CreateElement는 위와 같이 작용을 한다.