[React공식 문서 읽기] JSX 문법

JSX 는 Javascript를 확장한 문법입니다.

Javascript모든 기능이 포함되어 있고, React element를 생성합니다.

const element = <h1>Hello, React</h1>;

 

React는 마크업과 Logic을 둘다 포함하는 Component라는 느슨한 연결의 유닛으로 SOC(separation of concerns, 관심사 분리)합니다.

 

JSX에서는 Javascript 표현식을 넣을 수 있다 아래의 코드를 보면 

name이라는 변수를 중괄호로 감싸 사용하고 있습니다.

const name = "JSX";
const element = <h1>This is {name}</h1>

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

 

JSX문법은 html 태그의 속성처럼 문자열 리터럴을 정의할 수 있습니다.

또한 속성을 Javascript표현식으로도 사용가능합니다.

JSX의 태그 속성은 html보다 javascript사이드에 가깝고 html의 class속성은 JSX에서는 className, html의 htmlfor는 JSX에서 htmlFor로 정의하는 등 camelCase 명명 규칙을 사용합니다.

const element = <div className="test"></div>;
const imagePath = "%PATH%/Folder/Image.png";
const image = <img src={imagePath}/>;

 

 

JSX는 Injection공격을 방지할 수 있다고 합니다.

JSX에 삽입된 모든 값을 Rendering하기 전 이스케이프(html로 변환)하므로 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 Rendering되기 전에 문자열로 변환되고 이러한 특성으로 인해 XSS 공격을 방지할 수 있습니다.

 

JSX는 객체를 표현합니다.

Babel(js translate compiler)은 JSX를 React.createElement() 호출로 컴파일 합니다.

아래의 2 코드는 동일한 내용입니다.

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

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

 

참고 : ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React