서론

JSX는 자바스크립트 파일에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 자바스크립트용 구문 확장 형식이라고 한다.

본론

🔎 JSX와 HTML의 차이점

• JSX는 HTML과 매우 비슷해보이지만 조금 더 엄격하고 동적 정보를 표시할 수 있는 특징이 있다.

JSX와 React

JSX와 React는 보통 함께 사용되는 경우가 많지만, JSX는 구문 확장 문법이고 React는 JS의 프레임워크이기 때문에 엄연히 다르다고 볼 수 있다.

🔎 JSX의 규칙

1. 단일 루트 요소를 반환한다.

JSX는 여러 html 요소가 얼만큼 있어도 상관이 없지만, 최종적으로 루트 요소는 오직 1개이어야 한다.

// Bad ❌  
	return (
      <h2>이것은 제목</h2>
      <p>이것은 본문</p>
    )

// Bad ❌
	return (
      <div>
        <h2>이것은 제목</h2>
      </div>
      <div>
        <p>이것은 본문</p>
      </div>
    )

// Good ⭕️
	return (
      <div>
        <h2>이것은 제목</h2>
        <p>이것은 내용</p>	
      </div>
    )

// Recommend ⭕️
	return (
      <>
        <h2>이것은 제목</h2>
        <p>이것은 내용</p>	
      </>
    )

💡 루트 요소로 <div></div> 대신 <></> 를 사용하는 이유

빈 태그 <></>는 Fragment라고도 하며, 이는 브라우정 HTML 트리에 흔적을 남기지 않고 하위 요소들을 그룹화할 수 있는 장점이 있다.

💡 여러 JSX 태그를 wrapping 해야하는 이유?

JSX는 언뜻 HTML처럼 보이지만 내부적으로는 일반 JavaScript Object로 변환된다. 따라서, 두 개 이상의 object들을 Array[] 형식으로 wrapping하지 않고서는 JavaScript 함수에서 두 객체를 반환할 수 없다.

2. CamelCase를 사용한다.

JSX는 JavaScript로 바뀌고 JSX로 작성된 Attribute 들은 JavaScript Object의 key가 된다. Component 에서는 이러한 Attribute들을 변수로 읽어들이고 싶어하지만 JavaScript에는 변수 이름의 몇 가지 제한사항 중 아래의 제한 사항으로 인해 JSX 에서는 <div class="container"/> 대신 <div className="container"/> 과 같이 CamelCase 형식으로 Attribute 를 다룬다.

JavaScript의 예약어와 동일한 변수명을 작성할 수 없다.
예약어 : class, switch, if 등