REACT | 처음 만난 리액트 - 3. JSX

1. JSX 정의와 역할

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

const element = <h1>example code</h1>

 

JSX의 역할

JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거침

jsx에 따라 코드를 작성해도 최종적으로는 JavaScript로 나옴

리액트에서는 createElement 함수가 이 역할을 수행함

React.createElement(
	type, // 엘리먼트 유형, 타입 e.g. div, span
    [props], // 속성
    [...children] // 현재 엘리먼트가 포함한 자식 엘리먼트
)

 

 

JSX vs !JSX 

### JSX를 사용한 코드
const element = (
	<h1 className = "greeting">
    Hello World
    </h1>
)

### JSX를 사용하지 않은 코드
const element = React.createElemnt(
	'h1',
    {className: 'greeting'},
    'Hellow Wolrd'
)

 

2. JSX의 장점 및 사용법

JSX 장점

1. 간결한 코드

### JSX 사용
<div>Hello {name}! </div>

### !JSX
React.createElement('div',null, 'Hello ${name}!');

 

2. 가독성 향상

3. Injection Attacks 방어

Injection Attack이란 입력창에 소스 코드를 입력하여 해당 코드가 실행되도록 만드는 공격 기법

const title = response.potentiallyMaliciousInput;

const element = <h1>{title}</h1>;

React DOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환함, 그렇기 때문에 XSS(크로스 사이트 스트립팅) 공격도 방어할 수 있음

 

JSX 사용법

JavaScipt + HTML/XMl

JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다고 생각하면 됨

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

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarURL}></img>;

// 자식(children)을 정의하는 방법

const element  =(
	<div>
    	<h1>안녕하세요</h1>
        <h2>리액트 열심히 공부해야겠다.</h2>
    </div>
)

 

 

리액트를 쓰면서 jsx를 당연하게 사용해와서 리액트에서 필수로 사용해야 하는 것인줄 알았다.

근데 아니었다니.. babo