React JSX에 대해서 알아봅시다.

React JSX에 대해서 알아봅시다.

요약

1. JSX안에 함수식으로 사용 가능합니다.

2. camelCase로 써야합니다. ( JSX는 html보다 Javascript에 가깝다. )

3. Injection Attack을 막아줍니다. ( XSS )

JSX안에 함수식으로 사용가능.

Hello, {formatName(user)}!

부분을 보시면 formatName 함수를 호출하여 구현이 가능합니다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
​
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
​
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
​
ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX 변수는 camelCase

const element = <img src={user.avatarUrl}></img>;

• class -> className

• tabindex -> tabIndex

JSX Prevents Injection Attacks

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

• 기본적으로 ReactDOM은 escape를 한 다음 rendering을 하므로 안전합니다. 그러므로 XSS(cross-site-scripting)으로 부터 기본적으로 보호할 수 있습니다.

• escape(1) -> %31

reference

• https://reactjs.org/docs/introducing-jsx.html

•