React: React Component, React.createElement

React Component

• Class 컴포넌트

  class 컴포넌트는 꼭 render를 해줘야 한다.

  import React from 'react';
    
  // 정의
  class ClassComponent extends React.Component {
    render() {
      return (<div>Hello</div>)
    }
  }
    
  // 사용
  <ClassComponent />
  

• Function 컴포넌트

  import React from 'react';
    
  // 정의1
  function FunctionComponent() {
    return <div>Hello</div>
  }
    
  // 정의2
  const FunctionComponent = () => <div>Hello</div>
    
  // 사용
  <FunctionComponent />
  

React.createElement

React.createElement(
	type,
	[props],
	[...children]
);

• type

  태그 이름 (문자열), 기존에 작성한 리액트 컴포넌트, React.Fragment

  • 태그 이름 (문자열) type

    ReactDOM.render(
      React.createElement("h1", null, `type이 "태그 이름 문자열"입니다.`)
    )
    

    type이 h1이고 데이터를 주입하지 않으며 자식으로는 해당 문자열(type이 블라블라)이 들어가는 react element를 만들었다.

    <h1>type이 “태그 이름 문자열”입니다.</h1>

  • 리액트 컴포넌트 type

    const Component = () => {
      return React.createElement(
        "p",
        null,
        `type이 "리액트 컴포넌트" 입니다.`
      )
    }
        
    ReactDOM.render(React.createElement(Component))
    // ReactDOM.render(React.createElement(Component,null, null))
    

    <p>type이 “리액트 컴포넌트”입니다.</p>

  • React.Fragment

    ReactDOM.render(
      React.createElement(
        React.Fragment,
        null,
        `type이 "React.Fragment"입니다.`,
        `type이 "React.Fragment"입니다.`,
        `type이 "React.Fragment"입니다.`
      )
    )
    

    React.Fragment는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.

    Fragments – React

• props

  리액트 컴포넌트에 넣어주는 데이터 객체

• children

  자식으로 넣어주는 요소들