2. JSX란?

JSX (JavaScript XML) 란?

• Javascript에 XML을 추가 확장한 문법
• 리액트로 프로젝트 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아님
• 브라우저에서 실행하기 전에 바벨을 사용해서 일반 자바스크립트 형태의 코드로 변환
• 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리

 

예시

// 실제 작성할 JSX 예시
function App() {
	return (
      <h1>Hello, GodDaeHee!</h1>
    );
}

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() {
	return React.createElement("h1", null, "Hello, GodDaeHee!");

 

 

문법

1. 반드시 부모 요소 하나가 감싸는 형태
( Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조여야 함)

 

에러 예시

// Fail to compile
// parsing error : adjacent JSX elements be wrapped in an enclosing tag
// Did you want a JSX fragment <>...</>?
function App() {
	return (
		<div>Hello</div>
		<div>GodDaeHee!</div>
	);
}

정상 작동 예시

// div를 사용 하였기 때문에 스타일 적용시 작성한 코드를 div로 한번 더 감쌌다는 부분을 고려해야 한다.
function App() {
	return (
		<div>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</div>
	);
}

2. 자바스크립트 표현식

( JSX 내에서 자바스크립트 표현식을 쓰려면 코드를 {}로 감싸주면 됨 )

 

예시

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

 

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

• if문과 for문은 자바스크립트 표현식이 아니기 때문에 JSX 내부에 사용 불가능
• 때문에 JSX 주변 코드에서 if문을 사용하거나 {}안에서 삼항연산자 (조건부 연산자) 사용

4. React DOM은 HTML Attribute 이름 대신 camelCase 프로퍼티 명명 규칙을 사용

• 카멜 표기법 사용 (font-size → fontSize)
• class 대신 className을 사용

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

• {/*...*/ }으로 사용
• 시작 태그 여러줄 작성 시, ' // '  사용 가능