컴포넌트의 정의와 사용

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_1

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

정의2_2

const FunctionComponent = () => <div>Hello</div>

사용

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

React.createElement

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

1. 태그이름 문자열 타입

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

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

2. 리액트 컴포넌트 타입

<Component /> => <p>type이 "React 컴포넌트" 입니다.</p>

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

ReactDOM.render(
    React.createElement(Component, null, null),
    document.querySelector('#root')
)

3. React.Fragment

ReactDOM.render(
    React.createElement(
        React.Fragment,
        null, //data
        `type이 "리액트 프래그먼트"입니다`,
        `type이 "리액트 프래그먼트"입니다`,
        `type이 "리액트 프래그먼트"입니다`
    ),
    document.querySelector('#root')
);

4. 복잡한 리액트 앨리먼트 모임

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')
);