JSX란?

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

// 실제 작성할 JSX 예시
function App() {
return (

Hello, hskwon!

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
return React.createElement("h1", null, "Hello, hskwon!");
}

JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.(주관적인 관점)
"JSX문법의 특징"
컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야함.
function App(){
return(

<h1>테스트1</h1>
<h2>테스트2</h2>

)
}
위처럼 요소가 두 개 이상 존재하므로 그것을 감싸는 요소가 있어야 한다. 위는 에러가 발생...

function App(){
return(

<div>
	<h1>테스트1</h1>
	<h2>테스트2</h2>
</div>

)
}
이처럼 바깥을 div 로 감싼 모습!

이렇게 감싸는 이유는, 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.

(((((((5.13 금요일에 배운 내용 추가)))))))
반드시 div로 감싸야만 하는것은 아니다.

'<></>'

와 같이 프라그먼트로 묶어줘도 됨!

기본구조
import React from 'react';

function App() {
//자바스크립트 쓰는곳!
const name = '리액트';

return (
//html 쓰는곳!
<>

<h1>{name}</h1>
<h2>test</h2>

</>
);
}

export default App;

기존에 HTML에서 스타일을 지정할 때 background-color 와 같이 - 문자가 포함된 이름들을, JSX에서 사용할 때에는 -를 없애고 카멜 표기법으로 작성해야 함.

예 : background-color -> backgroundColor

function App() {
const style = {
backgroundColor: 'white',
fontSize: '10px',
fontWeight: 'bold'
}
return (

테스트
) } div 등에 class라는 속성을 설정할 때, 기존에 HTML의 경우
와 같이 표현했다면, JSX에서는
으로 className이라고 표시해야 함.
HTML 등에서 input 태그 등은 별도로 닫지 않아도 괜찮았지만, JSX에서는 반드시 닫아주는 태그를 작성해야 함.

// 혹은 다음과 같이 self-closing 태그로 작성해도 무방

JSX 내에서 주석을 작성할 때에는 { / … / } 와 같은 형식으로 작성한다.
시작 태그를 여러 줄로 작성 시, 그 내부에서 // 를 사용하여 주석을 작성할 수도 있다.

className="classEx1" // 주석 작성 가능