const element = <h1>Hello, World!</h1>

**JSX(JavaScript Syntax eXtensions)**은 자바스크립트를 확장한 문법이다.

JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

개발자가 JSX로 코드를 작성하면, 리액트 엔진은 JSX를 기존 자바스크립트로 해석해 준다. 이를 ‘선언형 화면’ 기술이라 한다.

브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 코드의 형태로 변환하는데, React.createElement() 호출로 컴파일하게 된다.

function App() {
	return(
		<h1 className="greeting"> Hello </h1>
	);
}

// 바벨을 통해 다음과 같은 자바스크립트 코드로 해석함.

function App(){
	return React.createElement("h1", {className:'greeting'}, "Hello");
}

JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하기 때문에 편리하다.

JSX 문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.(최상위 태그는 반드시 하나여야만 한다.)

   Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

   // 에러 케이스
   
   function App() {
   	return(
   		<div>Hello</div>
   		<div>MINA</div>
   	);
   }
   
   // 정상 케이스 
   
   function App(){
   	return(
   		<>
   			<div>Hello</div>
   			<div>MINA</div>
   		</>
   	);
   }
   

2. 자바스크립트 표현식을 사용할 수 있다.

   JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 사용하려면 JSX 내부에서 코드를 중괄호로 감싸주면 된다.

   중괄호 내부에는 자바스크립트 표현식만 사용할 수 있다는 점에 유의한다. 또한, 숫자나 문자열, 배열 값만 정상적으로 렌더링된다. 불리언, undefined, null, 객체 등의 값은 렌더링되지 않는다. (객체의 프로퍼티 값이 문자열이나 숫자, 배열이라면 가능. ex) {obj.a}

   유효한 모든 자바스크립트 표현식을 넣어 줄 수 있다.

   
   function App(){
   	const name = "MINA";
   	return(
   		<>
   			<div>Hello</div>
   			<div>{name}</div>
   		</>
   	);
   }
   

3. if문, for문 대신 삼항 연산자(조건부 연산자)를 사용한다.

   if 구문과 for 루프는 자바스크립트 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.

   그렇기 때문에 조건부에 따라 다른 렌더링 시, JSX 주변 코드에서 if 문을 사용하거나, {} 안에서 삼항 연산자 (조건부 연산자)를 이용한다.

   // 방법 1. 외부에서 if 문을 사용하기
   
   function App(){
   	let desc ="";
   	const loginYn ="Y";
   	if(loginYn === 'Y'){
   		desc = <div>Mina입니다. </div>;
   	}else{
   		desc = <div>비회원입니다.</div>;
   	}
   	return(
   		<>
   			{desc}
   		</>
   	);
   }
   
   // 방법 2. 내부에서 사용하기
   
   function App(){
   	const loginYn ='Y';
   	return(
   		<>
   			<div>
   			{loginYn === 'Y' ? (
   				<div>Mina입니다.</div>
   			) : (<div>비회원입니다.</div>)}
   			</div>
   		</>
   	);
   }
   
   // 방법 3. && 연산자 사용하기
   // 조건이 만족하지 않을 경우 아무것도 노출되지 않음.
   
   function App(){
   	const loginYn = 'Y';
   	return(
   		<>
   			<div>
   				{loginYn === 'Y' && <div>Mina입니다.</div>}
   			</div>
   		</>
   	);
   }
   
   // 방법 4. 즉시 실행 함수 사용하기
   
   function App() {
   	const loginYn = 'Y';
   	return(
   		<>
   			{
   				(()=> {
   					if(loginYn === 'Y'){
   						return (<div>Mina입니다.</div>);
   					}else{
   						return (<div>비회원입니다.</div>);
   					}
   				})()
   			}
   		</>
   	);
   }
   

4. React DOM은 HTML 어티르뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

   • JSX 스타일링

     JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.

     카멜 표기법으로 작성한다. (font-size ⇒ fontSize)

     function App() {
     	const style = {
     		backgroundColor: 'green',
     		fontSize: '12px'
     	}
     	return(
     		<div style={style}>Hello, MINA</div>
     	);
     }
     

   • class 대신 className

     function App() {
     	const style = {
     		backgroundColor: 'green',
     		fontSize:'12px'
     	}
     	return (
     		<div className = "testClass">Hello, MINA</div>
     	);
     }
     

5. JSX 내에서 주석 사용하는 방법

   JSX 내에서 {/…/} 와 같은 형식을 사용한다.

   function App(){
   	return (
   		<>
   			{/*주석사용방법*/}
   			<div
   			// 주석 사용 방법
   			>MINAMINA</div>
   		</div>
   		);
   	}
   

6. 모든 태그는 닫혀 있어야 한다!