[React] JSX

jsx란
XML과 유사한 문법을 가지고 DOM 트리를 생성할 수 있는 javascript가 확장된 것이다.
쉽게 얘가 뭐하는데 묻는다면, 그냥 React에서 html을 표현할 때 사용한다고 생각하면 된다.
원래에는 페이스북(현 메타)에서 React를 사용할 때 사용할 목적으로 개발되었지만, 현재에는 많은 웹 프레임워크에서 채택되어 사용 중이라고 한다.

아래와 같이 사용가능

const element = <h2>hi</h2>;

왼쪽은 흔히 사용하는 변수 생성방법이지만 오른쪽에는 html이 문법이 들어가는 형태이다.
실제 같은 기능을 하는 코드를 jsx를 사용한 코드와 사용하지 않은 코드로 비교해보면 아래와 같다.

const element = (
	<h1 className="greeting">
    	Hi
    </h1>
)

const element = React.createElement(
	'h1',
    {className:'greeting'},
    'Hi'
)

위의 코드는 jsx를 사용한 코드이고 아래 코드는 사용하지 않은 코드이다.
이렇듯 jsx를 사용하지 않는다고 웹 개발이 안되는 것은 아니지만 jsx를 사용하면 개발속도와 가독성에 유리한 장점이 있다고한다.

참고로 React.createElement의 문법은 아래와 같다.

React.createElement(
	type,
    [props],
    [...children]
)

추후 React에 자세히 들어가게 된다면 다시 정리할 예정이다.

jsx를 어떻게 사용하면 좋을지 생각해보면 그냥 xml/html을 사용하다가 js문법을 사용하고 싶을 때 {}를 이용하여 js를 사용하면된다.

const v_con ='123'
const elemet = <h1>{v_con}</h1>