[리액트] JSX란

JSX 정의와 역할

JSX란

A syntax extension to JavaScript (자바스크립트 문법의 확장)

JavaScript + XML/HTML , JavaScript and XML의 앞글자를 따서 JSX라 한다.
자바스크립트 코드와 HTML 코드를 같이 쓰는 형태

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

쉽게 말해 HTML 태그를 JavaScript 문법과 같이 사용할 수 있다.

 

JSX 역할

JSX는 내부적으로 XML, HTML 코드를 자바스크립트 코드로 변환하는 과정을 거쳐서 최종적으론 자바스크립트 코드가 나온다. 이때 리액트의 createElement가 변환하는 역할을 맡는다.

// JSX 사용한 코드
class Hello extends React.Component {
	render () {
		return <div>Hello {this.props.toWhat}</div>;
	}
}

ReactDOM.redner(
	<Hello toWhat="World" />,
	document.getElementById('root')
);

// JSX 사용하지 않은 코드 - 순수한 자바스크립트 코드
// JSX 부분이 createElement로 대체 가능
class Hello2 extends React.Component {
	render () {
		return React.createElement('div',null,'Hello ${this.props.toWhat}');
	}
}

ReactDOM.redner(
	React.createElement(Hello2, { toWhat: 'World' }, null),
	document.getElementById('root')
);

React.createElement 함수 호출의 결과로 자바스크립트 객체가 반환된다.

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

이 객체를 React Element를 부른다. 리액트는 React Element를 읽어서 DOM를 만들고 항상 최신 상태를 유지하게 된다.

 

React createElement의 입력값들을 알아보자

React.createElement(type, [props], [... children] )

• type: div, span 같은 tag type문자열 or 리액트 컴포넌트
• props: 속성들이 들어간다.
• children: 엘리먼트가 갖고 있는 자식 element들

 

JSX의 장점 및 사용법

JSX 장점

1. 간결한 코드와 가독성 향상
   
   
2. Injection Attacks 방어
   Injection Attack : 문자, 숫자 같은 일반적인 데이터가 아닌 소스 코드를 입력하여 해당 코드가 실행되도록 하는 해킹 방법
   
   • 리액트 돔은 렌더링 전에 임베딩된 값을 모두 문자열로 변환한다.
   • XSS(크로스 사이트 스크립팅) 방어가 가능하다.

 

JSX 사용법

• 자바스크립트 변수나 함수를 사용하려면 { } 안에 사용해야 한다.

// 변수 사용
const name = '홍길동';
const element = <h1>안녕 , {name}</h1>;

ReactDOM.render(
	element,
	document.getElementById('root')
);

// 함수 사용
function formatName(user) {
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName: 'Gildong',
	lastName: 'Hong'
}

const element = (
	<h1>
		Hello, {formatName(user)}
	</h1>
);

 

• 태그의 속성 넣는 방법
  문자열로 넣으려면 큰따옴표(" ")로 넣어야 하고 , 자바스크립트 코드는 { }에 넣어야 한다.

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

// 자바스크립트 코드 넣기
const element = <img src={user.avatarUrl}></img>;

 

• 자식(Children)을 정의하는 방법

const element = (
	<div>
		<h1>안녕하세요</h1>
		<h2>열심히 리액트를 공부해봅시다!</h2>
	</div>
);

 

인프런 처음 만난 리액트

[무료] 처음 만난 리액트(React) - 인프런 | 강의