JSX

• 자바스크립트 확장문법
• like XML
• 작성한 코드는 브라우저에서 실행 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 코드로 변형됨

문법

1. 감싸인 요소

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸야 함
• Virtual DOM에서 컴포넌트의 변화 감지 시 효율적으로 비교하기 위해 컴포넌트 내부는 하나의 DOM 트리로 이루어져야 한다는 규칙

2. 자바스크립트 표현

• JSX 내부에서 자바스크립트 표현식 사용 가능

const App = () => {
	const name = "jj";
    return(
    	<>
        	<h1>{name}</h1>
            <h2>안녕</h2>
        </>
    );

}

3. If문 대신 조건부 연산자

• JSX 내 자바스크립트 표현식 내에서는 if문 사용이 불가능함.
• 자바스크립트 표현식 내 조건부 연산자, 즉 삼항 연산자 사용!

const App = () => {
	const name = "jj";
    return(
    	<>
        	{name==='react'?(
            		<h1>react</h1>
            		):(
            		<h2>리액트아님</h2>
           	)}
        </>
    );

}

4. AND 연산자(&&)를 이용한 조건부 렌더링

• 삼항 연산자보다 훨씬 간단하게 구현 가능함.

return(
    	<>{name === 'react' && <h1>react</h1>}</>
    );

• 값이 0인 경우에는 화면에 0이 나타나는 것 주의!

JSX의 () 사용

• 여러 줄로 작성 시에는 괄호 사용
• 괄호 사용은 필수가 아님

5. undefined를 렌더링하지 않기