Web/React

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

bugtype 2019. 3. 19. 12:13

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