01.React.createElement
React.createElement( type, // 태그 이름 문자열 | 리엑트 컴포넌트 | React.Fragment [props], // 리엑트 컴포넌트에 넣어주는 데이터 객체 [...children] // 자식으로 넣어주는 요소들 );
- 리액트는
React.createElement(type, [props], [...children])라는API를 통해 컴포넌트를 생성합니다.React에서 컴포넌트를 통해UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있습니다.
02.태그 이름 문자열 type
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <body> <div id="root"></div> <script type="text/javascript"> // <h1>`type 이 "태그 이름 문자열" 입니다.`</h1> ReactDOM.render( React.createElement("h1", null, `type 이 "태그 이름 문자열" 입니다.`), document.querySelector("#root") ); </script> </body> </html>
- 태그 이름을
React.Component에 정의하여 컴포넌트를 생성 합니다.
실행 결과
03.리엑트 컴포넌트 type
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <body> <div id="root"></div> <script type="text/javascript"> const Component = () => { return React.createElement("p", null, `type이 "React 컴포넌트 입니다. "`); } // <Component></Component> => <Component /> => <p>`type이 "React 컴포넌트 입니다. "`</p> ReactDOM.render( React.createElement(Component, null, null), document.querySelector("#root") ); </script> </body> </html>
- 새로 생성한 컴포넌트를
React.Component에 넣습니다.
실행 결과
04.3.React.Fragment type
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <body> <div id="root"></div> <script type="text/javascript"> ReactDOM.render( React.createElement( React.Fragment, null, `type이 "React Fragment 입니다."` `type이 "React Fragment 입니다."` `type이 "React Fragment 입니다."` ), document.querySelector("#root") ); </script> </body> </html>
React.Component의 자식 요소를 여러개 정의할 때 사용합니다.
실행 결과
05.복잡한 리엑트 엘리먼트 모임
<!-- <div> <div> <h1>주제</h1> <ul> <li>React</li> <li>Vue</li> </ul> </div> </div> -->```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <body> <div id="root"></div> <script type="text/javascript"> 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") ); </script> </body> </html>
실행 결과
일취월장(日就月將) - 「날마다 달마다 성장하고 발전한다.」