const myElement = React.createElement('h1', {}, 'I do not use JSX!');

 

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

 

기본 jsx 문법 파헤쳐보기

 

'h1': 이것은 우리가 만들고자 하는 요소의 유형을 지정하는 문자열 리터럴입니다 - h1 태그.

 

{}: React.createElement의 두 번째 인수로 전달하는 빈 개체입니다.

 

'JSX를 사용하지 않습니다!': h1 요소의 내용을 나타내는 문자열 리터럴입니다.

 

여기서 조금더 상세히 알기위해서

 

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

여기서 위치에서 

(첫번째자리, 두번째자리,세번째자리)에서

첫번째 자리는 무엇이 올수있고,

두번째 자리는 무엇이 올수있고,

세번째 자리는 무엇이 올수있고,

 

있는지 파악해보았다.

 

첫 번째 인수는 생성하려는 요소의 유형을 지정합니다. HTML 태그 이름(예: 'h1', 'div', 'span' 등)을 나타내는 문자열이거나 사용자 지정 React 구성 요소(예: MyComponent)에 대한 참조일 수 있습니다. , 여기서 MyComponent는 React 구성 요소를 참조하는 변수입니다.

 

HTML 태그를 나타내며,

HTML 태그 이름(예: 'h1', 'div', 'span')

 

두 번째 인수는 요소에 전달하려는 소품을 지정합니다. 소품은 HTML 속성과 유사하지만 함수, 객체 또는 배열과 같은 다른 값을 포함할 수도 있습니다. 예를 들어 h1 요소에 className 속성을 추가하려는 경우 {className: 'my-class'}와 같은 객체를 createElement의 두 번째 인수로 전달할 수 있습니다. props를 전달할 필요가 없으면 빈 객체({})를 대신 전달할 수 있습니다.

 

두번째 자리는 속성을 나타냅니다.

속성: h1 (html의 속성)

 

 

세 번째 인수는 요소의 내용을 지정합니다. 이것은 문자열, 숫자 또는 다른 요소의 배열일 수 있습니다. 요소 내에 자식 요소를 포함해야 하는 경우 추가 createElement 호출을 사용하여 자식 요소를 만들고 세 번째 인수에 배열로 전달할 수 있습니다. 예를 들어, 두 개의 자식 h1 요소가 있는 div 요소를 생성하려면 다음과 같이 할 수 있습니다.

 

세번째 자리는 해당 태그 안에 들어가는 내용을 나타냅니다.

세 번째 인수로 지정하여 각 h1 요소의 텍스트 콘텐츠.