JSX이란?

자바스크립트의 JS와 XML의 X를 합친 말이다.

JSX는 자바스크립트 코드 안에서 태그 기반의 구문을 써서

리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트의 확장이다.

JSX는 단지 복잡한 createElement 호출에서 빠뜨린 콤마를 찾느라고

고생하지 않고도 편하게 리액트 엘리먼트를 만들 수 있게 해주는 다른 방법일 뿐이다.

리액트 엘리먼트를 통해 UI를 쉽게 만들 수 있는 리액트의 반필수적이고 편리한 도구라고 생각하면 쉽다.

왜 HTML이 아니라 XML이지?

XML은 Extensible Markup Language으로, 데이터를 교환할 때 사용하는 마크업 언어이다.

공공데이터포털, 오픈API 문서들을 보면 대부분의 API 반환값이 XML로 되어있다.

두 개의 큰 차이점은 바로 태그가 사전에 정의되어있냐 안되어있냐의 차이이다.

XML은 태그이름을 사용자가 전부 정의를 해줘야한다. 즉, 커스터마이징이 가능한 것이다.

그러나 HTML은 header, footer, body, title, h1, h2 등등 이미 HTML을 개발한 사람들이 정의한 태그이름이 있다.

이 차이가 있다고 생각하면 쉽다. 사실 HTML은 대소문자를 구분하지 않고, XML은 구분한다는 차이도 더 있다.

사용법

위의 XML의 성질때문에, JSX에서는 대소문자를 구분해야하며, 열었던 태그는 반드시 닫아야한다.

컴포넌트화

<IngredientsList>
  <Ingredient />
  <Ingredient />
  <Ingredient />
</IngredientsList>

JSX에서는 사용자가 원하는 엘리먼트를 컴포넌트화 시키고 이를 재사용할 수 있다.

className

<h1 className="fancy">구운 연어</h1>

이전의 글에서 JSX의 예약어에 관한 말을 한 적이 있다.

JSX는 사실 자바스크립트 언어로 만든 것이기 때문에,

이미 자바스크립트의 예약어인 class를 사용할 수 없다.

그래서 html의 class를 표현하려면 className을 사용한다.

lowerCamelCase

JSX에서는 Lower Camel Case를 사용한다.

class-name 이 아닌, className으로 표현하는 것이다.

자바스크립트 식

중괄호로 자바스크립트 식을 감싸면 중괄호 안의 식을 연산해서 결과를 대입해준다.

<h1>{1+2}</h1>

위를 ReactDOM.render를 하게 되면 3으로 표현된다는 말이다.

<h1>{title}</h1>

또한 title이라는 변수의 값이 있다면, 변수를 가져와서 사용도 가능하다.

배열을 매핑하기

<ul>
  {props.ingredients.map((ingredient, i) => (
    <li key={i}>{ingredient}</li>
  ))}
</ul>

이런식으로 배열을 JSX 엘리먼트로 변환할 수 있다.

엘리먼트

createElement()나 JSX로 생성된 리액트의 엘리먼트는 다음과 같은 객체로 표현된다.

<h1 className="fancy">구운 연어</h1>

위의 JSX로 표현된 객체는

const element = {
	type: 'h1',
  	props: {
    	className: 'fancy'
    }
}

다음과 같은 표현인 것이다.