What is JSX! JSX는 무엇인가!!!

금일은 JSX 문법에대해 알아보자!

JSX란?

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

// JSX예시

function App() {
	return (
    <h1> Hello, World! <h1
                           );
                           }

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.

function App() { return React.createElement("h1", null, "Hello, GodDaeHee!"); }

JSX 문법
!! 반드시 부모 요소는 한개의 태그로 감싸져 있어야 한다.
이게 가장중요하다 다음 아래는 그외 중요한 문법 요소들이다

감싸인 요소

자바스크립트 표현

if문 대신 조건부 연산자

AND 연산자(&&)를 사용한 조건부 렌더링

undefined를 렌더링하지 않기

인라인 스타일링

class 대신 className

꼭 닫아야 하는 태그

주석

자 그럼 JSX의 장점은 뭘까?

JSX의 장점

보기 쉽고 익숙하다

일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교해보면, 몇 초만 보아도 JSX를 사용하는 편이 더욱 가독성이 높고 작성하기 쉽다는 것을 느낄 수 있다. HTML코드를 작성하는 것과 비슷하기 때문이다.

높은 활용도

JSX에서는 HTML태그를 사용할 수 있을 뿐만 아니라, 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.

이외에도 여러가지 장점이있지만 주관적으로 기존 복잡한구성의 문법에서 보다 직관적으로 변한게 가장 큰 장점인거같다!!

미래의 앱나무들이 JSX문법이 익숙해지는 그날까지 !!!!