React JSX 문법

JSX는 과거 페이스북에서 PHP를 개량해 만들었던 XHP에 기원을 두고 있는 새로운 자바스크립트 문법입니다.

React는 JSX로 짜여집니다. (JavaScript는 아닙니다.)

JSX의 특징은 기본적으로 html과 유사합니다.
다만 약간의 원칙이 더 존재합니다.

A. 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 합니다.

<div>
  <p>first line</p>
  <p>second line</p>
</div>
<div>
  <p>second block</p>
</div>

위 처럼 두개의 div가 병렬로 존재한다면 새로운 div 태그로 감싸거나 fragment를 React를 임포트 하는 라인에서 같이 임포트해서 fragment 태그로 감싸줘야 합니다.

fragment 태그는?
React에서 div를 추가해 감싸고 싶지는 않지만 다른 태그를 감쌀 필요성이 있을 때 사용할 수 있도록 React에서 제공하는 태그입니다.

B. class 대신 className을 사용합니다.

C. 스타일 속성은 중괄호({}) 안에 객체 형태로 표시하며 단어 사이의 ‘-‘를 없애는 대신 카멜케이스(Camel Case)를 사용해 CSS 프로퍼티를 나타냅니다.

<div className="container" style={{backgroundColor: "red", fontSize: 16}} />

D. 모든 태그는 반드시 닫혀 있어야 합니다.

인풋 태그의 경우 html에서는 닫지 않고 사용하는 경우도 있으나,
JSX에서는 단축문법으로라도 반드시 닫아야 합니다.

<input />

E. JSX 안에서 JavaScript 값을 사용할 때엔 중괄호를 사용합니다. 중괄호 안에 변수명을 입력하거나 JavaScript 계산식, 값 등을 넣을 수 있습니다.

<div>
{name}
</div>

F. 주석은 {/**/}로 내용을 감쌉니다.