JSX

JSX(JavaScript Xml)이란?

• JSX는 JS에 XML을 추가한 확장 문법이며, React로 프로젝트를 할 때 사용된다.
• JSX로 작성한 코드는 브라우저로 실행하기 전에 babel(자바스크립트 컴파일러)을 이용하여 자바스크립트 형태로 변환된다.

* 여기서 XML은 무엇일까?

HTML과 매우 유사한 문자 기반의 마크업 언어이지만, 데이터를 저장하고 전달할 목적으로 만들어진 언어이다.

XML의 특징

XML의 중요한 특징은 다음과 같습니다.

1. XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어입니다.
2. XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해줍니다.
3. XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋습니다.
4. XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 합니다.
5. XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어집니다.
   (출처 : http://www.tcpschool.com/xml/xml_intro_basic)

JSX 문법

1. 하나의 컴포넌트 내부에는 부모 요소 하나가 감싸는 형태가 되어야한다

function App(){
	return(
    <div>
    	<div>Hello World!</div>
        <div>Element</div>
    </div>
    );
}

감싸는 형태로 <> </> 를 사용해도 된다.

2. 조건문을 사용할 때는 삼항 연산자를 이용한다
JSX 내부에서는 for,if 문은 사용 불가능하다.
조건문을 사용하려면 JSX 주변환경에서 if문을 사용하거나, 내부에서 삼항연산자를 이용한다. { 조건문 ? 참일 때의 실행문 : 거짓일 때의 실행문 }

3. JS 표현식을 사용하려면 중괄호{} 를 이용한다.

• 표현식 : 값으로 평가될 수 있는 문(statement)

const name = "ujun"
return <div>JS값을 보여주려면 {name}</div>