JSX

리액트에서는 JSX 확장자를 통해서 컴포넌트를 생성한다.

JSX

• 첫글자는 대문자로 시작해야한다.
• 반드시 return 구문이 있어야한다.
• JSX 문법은 html을 리턴한다.

편의성

function Greeting() {
    return React.createElement('h2', {}, 'hello world')
}

리액트를 사용하기 위해서는 이렇게 createElement를 사용해서 해야지만 jsx 문법을 사용한다면 html 태그 형식으로 리턴하여 보다 쉽게 개발할 수 있게된다.

JSX 규칙

1. return single element

하나의 요소를 리턴해야한다. (최상단에 하나의 태그로 묶여있어야 한다.)
section/article 태그를 사용할 수 있다.
Fragment
빈 태그로 사용(최상단 태그로 사용)

return <React.Fragment>...</React.Fragment>

or

return <>...</>

Fragment 태그 또는 빈태그(<>)를 사용할 수 있음

2. camelCase property naming convention

태그 내부 속성은 카멜 표기식 명명 규칙을 따른다.

3. className instead of class

자바스크립트에서 사용하는 클래스이름 class 대신에 리액트에서는 className으로 지정해서 사용한다. (id는 동일)
브라우저에서는 class로 인식하지만 코드에서는 className으로 한다.

4. close every element

모든 태그는 닫는 태그가 있어야한다.
input, img는 자바스크립트에서 닫는 태그가 필요없지만 리액트에서는 필수 요소이다.

5. formatting

return 구문에서 줄바꿈을 사용할때는 꼭 소괄호()를 사용하여 감싸주어야한다.
(대게 통일성을 위해서 소괄호를 다 사용)