엘레먼트

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

표현식 사용

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);
  • JSX: JavaScript를 확장한 문법.
  • 중괄호 안에 JavaScript 표현식 삽입 가능.

표현식에서 함수 호출

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Taewoo',
  lastName: 'Lee'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

if 문에서 엘레먼트 사용

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
  • JSX 표현식 if, for 안에서 사용 가능.

속성

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

자식 포함 가능

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

주입 공격 방지

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;
  • React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프합니다.

JSX 컴파일 전/후

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

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

// After React.createElement()
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

참고자료