[ React ] JSX란 무엇인가?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 유사하게 생겼다 JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다

// JSX

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

이렇게 작성된 코드는 다음과 같이 변환된다

// javascript

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

JSX의 장점

• 가독성이 높다
  • JS로 작성한 것보다 JSX로 작성한 게 보기 편하다 HTML로 코드를 작성한 것과 매우 비슷하다
• 활용성이 높다
  • JSX에서는 div나 span 같은 HTML 태그를 사용할수 있고 HTML과 비슷하여 전문 개발자 외에 개발 지식만 있으면 수정할 수도 있다
• 문법 오륭하 코드량 감소
  • 작성해야 할 코드가 줄어들며 코드가 줄어들어 실수와 반복 작성이 줄어든다