개발자가 되기 위한 발자취 30일차

신철민·2021년 12월 29일
0
// React.createElement(
  // type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
  // [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
  // [... children] // 자식으로 넣어주는 요소들);
  
  // 1. 태그 이름 문자열 type
  // <h1>type 이 "태그 이름 문자열" 입니다.</h1>
  // ReactDOM.render(
  //   React.createElement('h1', null, `type 이 "태그 이름 문자열" 입니다. `),
  //   document.querySelector('#root')
  //   );

  // 2. 리액트 컴포넌트 type
// 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')
//   );

// 3. React.Fragment
  // ReactDOM.render(
  //   React.createElement(
  //     React.Fragment,
  //     null,
  //     `type 이 "React Fragment 입니다."`
  //   ),
  //   document.querySelector('#root')
  //   );

  // 4. 복잡한 리액트 엘리먼트 모임
  // <h1>안녕하세요</h1>
  


// 우리가 작성한 어떤 코드를 => 순수하게 실행할 수 있는 자바스크립트
// babel
profile
쉬운 일이었다면 나에게까지 오지 않았을 것

0개의 댓글