JSX?

JSX는 JavaScript XML을 추가한 문법이다.

왜 Fragment를 감쌀까?

<>
	<div></div>
	<div></div>
<>

element를 object로 변환하기 때문에 함수에서 두 개의 object는 리턴할 수 없다. 하나로 묶어서 리턴해야한다.

리액트에서 attribute를 camelCase로 작성한 이유?

object로 바뀌기 때문에 -나 예약어를 사용할 수 없다.

근데 aria-*나 data-*는 예외

createElement

createElement로 리액트에서 JSX 없이 구현할 수 있다.

const element = createElement(type, props, ...children)

type에는 태그 이름이나 컴포넌트가 들어갈 수 있다.

props에는 객체이거나 null이 들어가야한다. null일 때는 빈 객체가 들어가게 된다. ref와 key는 props.ref props.key로 활용할 수 없다.

children에는 ReactNode가 들어갈 수 있고, optional이다.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}
// <h1 className="greeting">hello</h1>