JSX란?

JSX란 React에서 사용하는 React 전용 HTML이다.
Javascript에 XML을 추가한 확장한 문법인데, 자세한 내용은
밑 내용에서 확인해보자

-- 기존 HTML 방식 --

<div>
	<div class="title">제목</div>
    <button onclick="alert()">버튼</button>
<div>

-- JSX 방식 --

<div>
	<div className="title">제목</div>
    <button onClick="alert()">버튼</div>
</div>

크게 달라보이는 거는 없어보인다. 굳이 있자면 속성값의 대소문자정도??
실제로 리액트에서 쓰이는 JSX문법을 봐보자

function App() {
	**//자바스크립트를 작성하는구간**
	retutn (
    	**// html을 작성하는구간**
    	<h1>Hello, React!!</h1>
    )
}

이렇게 보니깐 기존의 문법이랑 많이 달라보인다 보는것 처럼
JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성한다

JSX문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다

-- 에러 케이스 --

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

-- 정상 케이스 --

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

2. JSX 스타일링

-- css style --

function App() {
	const style = {
        backgruondColor: 'green',
        fontSize: '12px'
    }
	return (
    	<div style={style}>
        	hello, react
        </div>
    )
}

JSX에서 자바스크립트 문법을 쓰려면 {}을 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어주어야 한다.
JSX에서는 카멜 표기법으로 작성해야한다.(font-size => fontSize)

-- class 대신 className

function App() {
	const style = {
    	fontSize: '16px'
    }
    return (
    	<div className="testClass">hello, react</div>
    )
}

일반적으로는 css클래스를 사용할때는 class라는 속성을 사용하지만
JSX에서는 class가 아닌 className을 사용한다