[React] JSX란 무엇인가?

JSX(JavaScript XML)은 자바스크립트에 XML을 추가로 확장한 문법이다.

• jsx는 리액트로 프로젝트를 개발할 때 사용되고, 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

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

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

• jsx는 하나의 파일에 자바스크립트와 html을 동시에 작성하여 편리하다.
• 자바스크립트에서 html을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.

 

JSX문법

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

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

+ Fragments를 선언하는 더 짧은 방법으로 <>  </> 사이에 작성하는 방법이 있다.

 

2. 자바스크립트 표현식

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

유효한 모든 자바스크립트 표현식을 넣을 수 있다.

 

3. if문(for문) 대신 삼항연산자를 사용한다.

if문과 for문은 자바스크립트 표현식이 아니기 때문에 JSX내부 자바스크립트 표현식에서는 사용할 수 없다.

따라서 조건부에 따라 렌더링이 필요하면 삼항연산자를 사용한다.

+ 아니면 return 위에서 if문으로 작성한 뒤 if문의 결과값을 변수에 담아 리턴문에 표현식으로 넣는다.

 

4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

1) jsx스타일링

자바스크립트 문법을 사용하려면 {}를 사용해야하기 때문에 스타일을 적용할때도 객체 형태로 넣는다.

카멜 표기법으로 작성한다. (font-size = fontSize)

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

2) class 대신 className

일반 html에선 css 클래스를 사용할 때에 class를 사용하지만 jsx에선 className이라고 사용해야 한다.

 

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

JSX 내에서 {/* .... */} 와 같은 형식을 사용한다.

시작태그를 여러줄 작성시에는 내부에서 //의 형식을 사용할 수 있다.

function App() {
	return (
		<>
			{/* 주석사용방법 */}
			<div>Hello, GodDaeHee!</div>
            
           <div
			// 주석사용방법
			>Hello, GodDaeHee!</div>
		</>
	);
}