JSX는 React에서 UI를 작성하기 위해 사용되는 JavaScript 확장 문법입니다. React는 JavaScript 라이브러리로, UI를 만들기 위해 JSX를 활용합니다.

1. JSX란?

JSX는 JavaScript XML의 줄임말로, JavaScript 안에서 XML 또는 HTML과 유사한 문법을 사용하여 UI를 작성할 수 있게 해줍니다.

JSX는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨이 일반 자바스크립트 형태로 코드를 변환한다. JSX의 장점으로는 아래와 같이 개발할때 보기 좋기 때문에 가독성이 좋다.

JSX 문법

function App() {
    return (
        <div>
            Hello <p>react</p>
        </div>
    )
}

function App() {
    return React.createElement("div", null, "Hello", React.createElement("p", null, "react"))
}

2. JSX 사용

다른 언어들과 마찬가지로 개인 프로젝트나 실무로 사용법은 접할 수 있기에 대략 생김새만 아래와 같다.

function App() {
    let lang = 'ENG';
    return (
        <div>
            {lang === 'KOR' ? (<h3>한국어</h3>) : (<h3>외국어</h3>)}
        </div>
    )
}

[출처]

• 리액트를 다루는 기술-김민준 저자(글)