[React] JSX 한 번에 이해하기 (정의, 특징, 장점)

✅ JSX란?

JavaScript Xml
자바스크립트 안에 HTML 코드를 쓸 수 있게 해주는 문법입니다.
브라우저는 JSX 파일을 직접 읽을 수 없기 때문에 브라우저 실행 전 "바벨"과 같은 컴파일러를 통해 일반 자바스크립트 형태의 코드로 변환됩니다.

// 실제 JSX 예시

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

위와 같이 작성 시 바벨이 다음과 같이 자바스크립트로 해석

function App() {
	return React.createElement("h1", null, "Hello, World!");
}

🤷‍♀️ 브라우저는 왜 JSX를 읽을 수 없는걸까?
👩‍💻 브라우저가 이해하는 기본 언어가 자바스크립트, HTML, CSS이기 때문입니다. JSX는 자바스크립트와 HTML을 결합한 리액트 라이브러리에서 사용되는 자바스크립트의 확장 문법입니다! JSX는 자바스크립트가 아니기 때문에 컴파일러를 통해 자바스크립트 코드로 변환해야 브라우저가 읽을 수 있어요!

JSX(외국인) > 컴파일러(번역가) > 브라우저(외국말을 모르는 한국인)

✅ JSX 장점

물론, JSX를 사용하는 것은 필수가 아닙니다! 하지만 왜!
많은 개발자들이 리액트와 함께 JSX 문법을 사용하는 걸까요?

1. 직관적이다
   UI를 HTML처럼 작성할 수 있기 때문에 해당 문법을 사용하면 자바스크립트 코드 안에서 UI를 더 직관적으로 작성할 수 있습니다.

const element = <h1>Hello, world!</h1>;

2. 에러 메시지
   원활한 개발을 위해 정확한 에러 및 경고 메시지를 표시해줍니다.

✅ JSX 특징

1. 반드시 하나의 부모로 감싸기

//오류
function App() {
	return (
		<div>Hello</div>
		<div>World!</div>
	);
}

//반드시 하나의 부모로 감싸기
function App() {
	return (
		<div> 또는 <>
			<div>Hello</div>
			<div>World!</div>
		</div> 또는 </>
	);
}

2. 자바스크립트 표현식 사용
   자바스크립트 표현식
   : 값을 생성하는 코드 조각!
   변수를 설정하거나 함수의 반환 값으로 사용할 수 있는 값을 만들 수 있습니다.
   자바스크립트의 표현식은 '리터럴, 식별자, 연산자와 함께 사용, 함수, 배열 또는 객체 접근, 삼항 연산자'와 같이 여러 가지 형태로 존재할 수 있습니다.
   

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

3. 조건에 따라 삼항연산자

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

4. 스타일링은 카멜케이스로 표기

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

🎓JSX란 무엇인가요?

✅ 참고
https://ko.legacy.reactjs.org/docs/introducing-jsx.html
https://goddaehee.tistory.com/296