아직 HTML도 완벽히 못하는 내가 JSX에 대해 블로그를 작성하고 있는 신기한 상황!
그래도 새롭게 배운 내용이 수백 개는 되니까 벨로그로 하나씩 정리해보려고 한다!

CodeCamp Frontend 본캠프가 시작됨과 동시에 React를 배우고 있다.

1. JSX란?

JSX는 'JavaScriptXML'의 약자로, React 전용 HTML이다.
React에서는 HTML 대신 JSX를 쓰는데, JavaScript처럼 작성한다.

React 안에서 HTML의 JavaScript화라고 할까?

2. JSX 문법

1. 반드시 전체를 감싸는 부모요소가 필요하다.

Function Hello () {
	return (
    	<div>
        	<div>안녕하세요</div>
            <div>Hello!</div>
        </div>
    )
  }

2. JavaScript 표현식 사용 가능 : { } 활용

Function Hello () {
	const name = 'Hong Gildong'
    return (
    	<div>
        	<div>안녕하세요</div>
            <div>{name}</div>
        </div>
    )
  }

3. DOM 규칙
1) JSX로 CSS 효과주기 (camel 표기법)

JSX로 CSS 효과를 주기 위해서는 background-color 대신 backgroundColor, font-size 대신 fontSize 등 Camel 표기법으로 작성해야 한다.

Function Hello () {
	const style = {
    	backgroundColor: 'gray',
        fontSize: '12px'

	return (
        	<div style={style}>안녕하세요</div>
    )
  }

2) className 쓰기

JSX에서는 class 대신 className을 사용한다.

Function Hello () {
	const style = {
    	backgroundColor: 'gray',
        fontSize: '12px'

	return (
        	<div className="Korean" style={style}>안녕하세요</div>
    )
  }