리액트1(Class 컴포넌트, Function 컴포넌트, ReactCreateElement)

Class 컴포넌트 정의 및 사용

class ClassComponent extends React.component{
    render() {
        return <div>Hello</div>
    }
}
ReactDom.render(<ClassComponent />, document.querySelector('#root'));

Function 컴포넌트 정의 및 사용

//정의 1
function FunctionComponent() {
    return <div>Hello</div>;
}
//정의 2
const FunctionComponent = () => <div>Hello</div>;

ReactCreateElement로 컴포넌트 만드는 방법

React.createElement(
    type,//태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
    [props],//리액트 컴포넌트에 넣어주는 대이터 객체
    [...children]// 자식으로 넣어주는 요소들
);
//1. 태그 이름 문자열 type => 결과 : <h1>type이 "태그 이름 문자열"<h1>
ReactDom.render(
    React.createElement("h1", null, 'type이 "태그 이름 문자열'),
    document.querySelector('#root')
);
//2. 리액트 컴포넌트 type => 결과 : <p>type이 "React 컴포넌트"입니다'<p>
const Component = () => {
    return React.createElement("p", null, 'type이 "React 컴포넌트"입니다');
};
ReactDom.render(
    React.createElement(Component, null, null),
    document.querySelector('#root')
);
//3. Fragment => 결과 : <div id="root"> "type이 "React Fragment"입니다"</div> 
ReactDom.render(
	React.createElement(React.Fragment, null, 'type이 "React Fragment"입니다'),
    document.querySelector('#root')
);

CreateElement 한계 : 복잡한 리액트 element 모임
작성한 코드 => 순수하게 실행할 수 있는 js코드로 바꿔주는 역할 : Babel