JSX란 무엇인가?

---

JSX(JavaScript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다.
외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이지만, 빌드 시 Babel에 의해 자바스크립트로 변환된다.자바스크립트 코드를 HTML처럼 표현 할 수 있는 것이 가장 큰 장정이며, 사용하는 이유이다.

JSX 문법

---

-모든 JSX 요소들은 하나의 부모 요소로 감싼다

반드시 부모 요소 하나가 감싸는 형태여야 한다.
Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

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

-자바스크립트의 표현식 사용 { }

JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 유효한 모든 JavaScript 표현식을 넣을 수 있다.

function App() {
	const name = 'React';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}

-class 속성을 설정할 경우 className으로 지정한다

<script>
<div className="class1">
    
</div>
</script>

html에서는 class로 지정했지만
js안에서 class문법과 혼동될 수 있기에
JSX 문법안에서는 className라고 명명해야한다.

• { }안에는 문자열, 숫자, 연산, 함수 호출을 할 수 있다.
  다만, 결과 값이 문자열, 숫자 일때만 브라우저에 나타나면, 배열, 객체와 같은 것들을 나타나지 않으니 주의
• 조건부 랜더링
  조건에 따라 각각 다른 것을 랜더링 하는 것으로 많이 사용하는 문법이기때문에 알아둘 필요가 있다.
• html문법과 달리 항상 닫는 태그가 있어야 한다.