Introducing JSX

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

위의 코드는 JSX라고 하는 자바스크립트 확장문법이다. 리액트는 위의 문법을 이용하여 UI를 구성하게 된다. JSX는 템플릿언어처럼 보일지 모르지만, 자바스크립트의 강력한 기능을 동반한다.

Embedding Expressions in JSX

중괄호 "{ }"로 코드를 묶으면 어떠한 자바스크립트도 JSX에 넣을 수 있다.

예를 들면, "2+2","user.firstname","formatName(user)"등도 유효한 문법이다.

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 is an Expression Too

컴파일이 끝나면, JSX도 자바스크립트 Object가 될 수 있다.

그말인 즉슨, JSX 문법을 if문이나 for문에도 넣을 수 있고, 변수에 할당할 수 있으며, 함수로 리턴을 하는 것등을 할 수 있다는 것이다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Specifying Attributes with JSX

속성도 지정할 수 있다.

const element = <div tabIndex="0"></div>;

또한, 중괄호 "{ }"를 이용하여 속성을 넣을 수도 있다.

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

Specifying Children with JSX

태그가 비어있다면 XML처럼 />로 닫아줘도 된다.

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

JSX태그는 자식을 포함할 수 있다.

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

JSX Represents Objects

Babel은 JSX를 React.createElement() 호출에 따라 컴파일한다.

아래의 두 코드는 같은 역할을 하는 코드이다.

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

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

React.createElement()는 BugFree한 코드를 짤 수 있도록 도와준다.