1. JSX란?

• JSX는 자바스크립트의 확장 문법
• XML과 유사하게 생김
• 브라우저가 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립 형태의 코드로 변환

fucntion App(){
	return (
	<div>
	Hello <b>react</b>
	</div>
	);
}

function App() {
 return React.createElement("div", null, "Hello" , React.createElement("b", null, "react"));
}

→ JSX는 자바스크립트 문법이 아니다.

2. JSX의 장점

• 가독성이 높음
• 작성 쉬움
• HTML 작성하는 사용 가능(높은 활용도)

3. JSX 문법

1. 감싸인 요소

컴포넌트에 여러 요소가 있으면 반드시 부모 요소 하나로 감싸야함
→ 컴포넌트 내부에는 하나의 DOM 트리구조로 이루어져야 한다는 규칙 존재
→ virtual DOM에서 효과적으로 변화를 감지하여 효율적으로 비교함

2. 자바스크립트 표현

JSX 안에서 JS 표현식 사용 가능하다.
JSX 내부안에 코드를 {}로 감싸면 끝! 쉽다!

function App() {
	const name = '리액트';
	return (
	<>
		<h1>{name} 안녕!</h1 >    // 리액트 안녕!
		<h2>잘 작동하니?</h2>       // 잘 작동하니?
	);
}

export default App;

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

JSX 내부의 자바스크립트 표현식에서 if문 사용 불가
조건에 따른 내용을 렌더링 할때는 JSX 밖에서 if문을 사용하여 사전에 값 설정

function App(){
	const name = '리액트';
	return (
		<div>
			{name === '리액트' ? (
				<h1>리액트입니다.</h2>
			) : (
				<h2>리액트가 아닙니다.</h2>
			)}
		</div>
	);

}

export default App;

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

function App() {
	const name = '뤼액트';
	return <div>{name === '리액트' ? <h1>리액트 입니다.</h2> : null}</div>
}

export default App;

→ null 을 렌더링 하면 아무것도 보여주지 않음

function App() {
	const name = '뤼액트';
	return <div>{name === '리액트' && <h1>리액트 입니다.</h2>}</div>
}

export default App;

→ false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않음
falsy한 값인 0은 예외적으로 화면에 출력됨

5. undefined를 렌더링 하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안된다. 오류가 발생하기 때문
→ OR(||)을 사용하여 undefinded일때 값을 지정하여 오류 방지

function App(){
	const name = undefined;
	return name || '값이 undefined입니다.';
}

export default App;

6. 인라인 스타일링

DOM요소에 스타일링 적용시에는 문자열 형태X, 객체형태로 작성

background-color → backgroundColor

font-size → fontSize

형식으로 카멜 표기법을 사용한다.

function App() {
	const name = '리액트';
	const style = {
		backgroundColor : 'black',
		color : 'red',
		fontSize : '48px'
	};
 return <div style={style}>{name}</div>;
}

export default App;

참고: 리액트를 다루는 기술