JSX

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.

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

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

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

_에러케이스_
  
function App() { 
  return ( 
  <div>Hello</div> 
  <div>GodDaeHee!</div> 
  	); 
  }

정상케이스
div 대신에 Fragment 나 <> </> 도 사용 가능

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

2.자바스크립트 표현식

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

function App() { 
  const name = 'GodDaeHee'; 
  return ( 
  <div> 
    <div>Hello</div> 
    <div>{name}!</div> 
  </div> 
  ); }

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

ex) 1. 외부에서 사용

function App() { 
let desc = ''; 
const loginYn = 'Y'; 
if(loginYn === 'Y') { 
  	desc = <div>GodDaeHee 입니다.</div>; 
} else { 
  	desc = <div>비회원 입니다.</div>; 
} return ( 
	<> 
		{desc} 
	</> 
); }

ex) 2. 내부에서 사용

function App() { 
	const loginYn = 'Y'; 
	return ( 
		<> 
			<div> 
				{loginYn === 'Y' ? ( 
								<div>GodDaeHee 입니다.</div>
				) : ( 
								<div>비회원 입니다.</div> 
				)} 
			</div> 
		</> 
); }

ex) 3. AND연산자(&&) 사용

	function App() { 
		const loginYn = 'Y'; 
		return ( 
			<> 
				<div> 
                {loginYn === 'Y' && <div>GodDaeHee 입니다</div>} 
				</div> 
			</> 
	); }

ex) 4. 즉시실행함수 사용

function App() { 
 		const loginYn = 'Y'; 
		return ( 
				<> 
					{ 
					 (() => { 
								if(loginYn ==="Y"){ 
  									return (<div>GodDaeHee 입니다.</div>); 	
								}else{ 
  									return (<div>비회원 입니다.</div>); 
    							} 
						})() 
					} 
				</> 
			); 
		}