JSX는 슈퍼 JS라는 뜻이 아니다

JSX

자바스크립트의 확장 문법으로 JavaScript + XML의 줄임말이다. 자바스크립트를 기반으로 마크업 언어를 함께 작성할 수 있도록 개선한 문법이다. JavaScript의 모든 기능을 포함하며, 브라우저에서 실행되기 전에 바벨을 사용해 자바스크립트 코드로 변환된다.

변환 전

function App() {
        return (
        <div>
            hello <strong>react</strong>
        <div>
    );
}

변환 후

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

JSX 규칙

1. 태그는 꼭 닫혀있어야 한다.
   • 일반적으로 여는 태그와 닫는 태그가 한 쌍으로 쓰인다.
   • 하위에 포함할 내용이 없는 태그는
     와 같은 형태로 바로 닫는 셀프 클로징 태그를 활용할 수 있다.
2. 모든 태그는 최상위의 태그 하나의 자식태그로 작성돼야 한다.
   • 만약 최상위 태그가 둘 이상인 경우 <React.Fragment></React.Fragment> 형태 혹은 <></> 형태로 Fragments를 활용해야 한다. Fragment는 DOM에 별도의 노드를 추가하지 않고 여러 자식태그를 그룹화할 수 있다.
3. 내부에서 자바스크립트 값을 활용할 때는 중괄호로 감싸주어야 한다.
4. class대신 className을 사용한다.
5. 내부CSS는 스타일 값을 객체로 만들어 style속성에 자바스크립트 값으로써 할당해야한다.
6. 카멜 표기법을 기본으로 한다.

JSX의 장점

• 스크립트 내 마크다운 작성을 HTML작성과 유사하게 만들고, 가독성을 개선한다.
• 자바스크립트 표현식을 사용하여, 변수값을 활용하기 편리하다.
• 조건문과 반복문을 응용한 마크다운 작성이 용이하다.

마무리

뭐가 React가 제공하는 호의인지 구분합시다

참고 문서

React공식문서 - JSX소개
[React기초] JSX란? / JSX 문법
React(리액트):JSX규칙(태그, 중괄호{}, 주석)