JSX란?

이름을 보면 javascript 와 관련이 있어 보인다.

 

JSX를 풀어 해석해보면

 

A syntax extension to Javascript = 자바스크립트의 확장문법

 

JSX 구성

Javascript + XML/HTML 

 

JSX 코드

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

 

JSX의 역할

내부적으로 XML + HTML를 자바스크립트로 변화하는 과정

 

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

// JSX를 사용하지 않은 코드
const element = React.createElement(
	'h1',
    { className: 'greeting' },
    'Hello, World!'
)

위 2코드는 결과가 같다.

 

JSX를 사용시 장점!

- 가독성이 올라간다.

-Injection Attacks 방어하면서 보안이 좋아진다.

 

JSX작성중에 중간에 javascript를 사용하고 싶을때

const name = '소플';
const element = <h1>안녕, {name}</h1>

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

위와 같이 {} 중괄호를 사용하면 된다.

 

JSX에서 태그의 속성(attribute)에 어떻게 값을 넣을까요?

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

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