JavaScript - JS vs JSX

JSX

• Javascript XML
• Javscript의 확장 문법, 함수 호출과 객체 생성을 위한 문법적 편의 제공
• Javascript에서 HTML 문법 사용 가능
• React에서 사용시, 직관적인 UI 작업이 가능하며 Error 와 Warning Message 가 더 유용한 내용을 포함하게 됨
• JSX는 컴파일 과정 (Babel 등)에서 JS로 변환

JSX 장점

• 개발자 편의성 향상
• 협업에 용이 / 생산성 향상
• 문법 오류와 코드량 감소

JSX 특징 ( HTML 과 차이점 )

• HTML 태그 내에서 JavaScript 연산
• class 👉 className
• 스타일은 object(객체) 로, 속성값은 camelCase 로 작성
• 모든 태그는 닫는 태그가 필수
• 최상위 element 는 반드시 하나

실제 코드 비교

// js
const element = document.createElement('div');
element.innerHTML = "Hello, World!";
document.body.appendChild(element);


// jsx
const element = <div>Hello, World!</div>;
ReactDOM.render(element, document.getElementById('root'));