JSX

JSX란?

JSX는 Javascript XML의 줄임말로 자바스크립트 언어 문법을 확장한 것이다.
요소 및 컴포넌트에 대한 코드를 XML과 유사하게 작성하고 JSX 태그는 name(태그이름), attributes(요소), chilren(하위 요소)이 있다.

JSX가 필요한 이유

JSX 확장자는 리액트 애플리케이션을 만드는데 꼭 필요한 것은 아니다. (js,ts 등 으로도 리액트 애플리케이션 개발가능)
JSX는 개발자에게 익숙한 구문을 사용할 수 있어 리액트 애플리케이션 코드를 더 간단하고 풍부하게 만들어준다.
JSX는 순수한 Javascript로 변환하여 브라우저에서 인식한다.

JSX 사용

JSX를 사용한 경우

import React from "react";

const Hello = () => {
    return (
        <div id='hello' className='du>
            <h1>Hello React</h1>
        </div>
    )
}
export default Hello;

JSX를 사용하지 않은 경우

import React from "react";

const Hello = () => {
    return React.createElement(
        'div',
        {id : 'hello', className : 'dummyClass',},
        React.createElement('h1', null, 'Hello React')
    )
}
export default Hello;

JSX 문법은 React 개발을 하는데 코드를 더욱 간단하게 작성할 수 있다.

JSX와 HTML의 다른점

(HTML => JSX)
Class => className (추후에 class로 공통되게 바뀔 예정)
for => htmlFor
(카멜 속성 명명 규칙)
onclick => onClick
tabindex => tabIndex
등...