[React] JSX

!해당 포스트는 처음 만난 리액트(React) - 소플 강의를 수강하면서 정리한 내용임.

JSX

JSX - a syntax extension to JavaScript(자바스크립트 확장 문법)

• JavaScrip + XML/HTML

JSX 코드 예시

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

 

 

JSX의 역할

createElement - JSX 코드를 자바스크립트로 변환해주는 리액트 함수

 

JSX를 사용한 코드

const element = (
	<h1 className="greeting">
		Hello, world!
	</h1>
)

 

JSX를 사용하지 않은 코드

const element = React.createElement(
	'h1',
	{ className: 'greeting'},
	'Hello, world!'
)

위 두 코드는 같은 의미임.

 

React.createElement()의 결과로 아래와 같은 객체가 생성됨

const element = {
	type: 'h1',
	props: {
		className: 'greeting',
		children: 'Hello, world!'
		}
}

 

리액트에서 JSX를 쓰는게 필수는 아니지만 편리함.

 

 

JSX의 장점

• 간결한 코드
• 가독성이 좋음
  • 버그를 발견하기 쉬움
• Injection Attacks 방어

 

JSX사용법

• XML/HTML 사이에 JS를 쓰고 싶은 경우 {} 중괄호를 사용
  • XML/HTML {JavaScript 코드} … XML/HTML

 

태그의 속성에 값을 넣는 방법

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>;

// 중괄호 사이에 자바스크립트 코드를 넣으면 됨!
const element = <img src={user.avaarUrl}</img>;

 

자식을 정의하는 법

const element = (
	<div>
		<h1>안녕하세요</h1>
		<h2>리액트 공부</h2>
	</div>
);

 

<div> 태그 안에 <h1>과 <h2> 태그