React Component

Class

// 정의
    class ClassComponent extends React.Component {
      render() {
        return <div>안녕하세요</div>;
      }}

Function

기본적인 함수 형태
return -> react.CreateElement 하기 위해 JSX 형태로 return

• arrow 함수 특징 : return만 존재 시 return과 중괄호 생략 가능

// 정의 1
    function FunctionComponent() {
      return <div>안녕하세요</div>
    }
// 정의 2
    const FunctionComponent = () => <div>안녕하세요</div>;

// 사용

ReactDOM.render(<FunctionComponent />, document.querySelector("#root"))

React.createElement로 Component 만들기

React.createElement
type : 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
[props] : 리액트 컴포넌트에 넣어주는 데이터 객체
[... children] : 자식으로 넣어주는 요소들

실제 DOM

<div id="root"></div>

📌 1. 태그 이름 문자열 type

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

가상 DOM

ReactDOM.render(
      React.createElement('h1', null, `type이 "태그 이름 문자열" 입니다.`),
      document.querySelector('#root')
      );

📌 2. React Component type

<Component></Component> = > <Component /> ⇒ <p></p>

가상 DOM

const Component = () => {
      return React.createElement(
        'p',
         null,
        `type이  "React 컴포넌트"입니다.`
        );
    };
 ReactDOM.render(
      React.createElement(Component, null, null),
      document.querySelector('#root')
    );

📌 3. React Fragment type

<div id=”root”>type이  "React 컴포넌트"입니다.</div>

가상 DOM

const Component = () => {
      return React.createElement(
        'p',
         null,
        `type이 "React Fragment "입니다.`
        );
    };
    ReactDOM.render(
      React.createElement(Component, null, null),
      document.querySelector('#root')
    );

📌 4. 복잡한 React Element type

<div><div><h1><li>React<li></h1><</div></div>

가상 DOM

ReactDOM.render(
      React.createElement(
        'div',
        null,
        React.createElement(
          'div',
          null,
          React.createElement('h1', null, "주제"),
          React.createElement(
          'ul',
          null,
          React.createElement('li', null, "React"),
          React.createElement('li', null, "Vue"),
          ),
         ),
        ),
      document.querySelector("#root")
    )