🙄 JSX가 뭔데?

JSX = A Syntax extension to Js= js문법의 확장

JS + XML / HTML

✍ JSX의 역할

브라우저가 실행되기 전에 JS로 변환(createElement)

function App() {
	return (
    	<h1> Hello, Second Post! </h1>
       );
   }

//jsx 형태..?
function App() {
	return React.createElemenet("h1", null, "Hello, Second Post!");
}

💕 createElement

1. 유형(string, div)
2. props(속성)
3. children (자식 element)

	React.createElement(
    		type,
            [props],
            [...children]
   )

🤘 Jsx의 장점

1. 간결한 코드
2. 가독성 향상 -> 버그 발견 쉬움
3. 높은 보완성

💓 사용법

xml/html
{js코드} => 중괄호로 js 코드 사용
xml/html

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

//예제1
const element = <h1>Hello, World!</h1>;
//jsx사용하지 않은 예제1
const element = React.createElement(
	'h1',
    { className: 'greeting},
    'Hello, World!
    }

//예제2
function App() {
	return (
    	<div>
        	<div>Hello</div>
            <div>HI Haein</div>
       </div>
    );
 }

2. 자바 스크립트 표현식은 {}로 감싸주어야 한다.

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

3. if문(for문) 대신 && 연산자(조건부 연산자) 사용

이후 conditional Rendering에서 자세하게 포스팅

function App() {
	const count = 0;
    
	return (
    	<div>
        	{count && <h1>Hello : {count} </h1> 
       </div>
    );
 }

💓 스타일링

1. 카멜 표기법의 작성

//font-size => fontSize
//backgroundColor 

2. class 대신 className으로 작성!