3.2.3 JSX에서 변수 출력하기

컴포넌트를 작성할 때, 약간의 코드를 통해 자체적으로 뷰를 변경할 수 있는 영리한 컴포넌트를 만들고 싶을 수 있다. 예를 들어 현재 날짜/시간 컴포넌트에 하드 코딩된 값이 아닌 현재 날짜와 시간을 사용한다면 매우 유용할 것이다.

JSX 없이 React를 사용할 때는 +를 이용해서 연결하거나, 만약 ES6+/ES2015+를 사용한다면 백틱(`)과 ${varName}로 표시한 문자열 템플릿을 사용할 수 있다. 여기서 varName은 변수 이름이다. 명세에서는 이 기능의 공식적인 이름을 템플릿 리터럴(template literal)이라고 한다.³ 예를 들어 일반적인 자바스크립트만으로 작성한 DateTimeNow 컴포넌트에서 속성을 텍스트로 사용하려면 다음과 같은 코드를 작성해야 한다.

class DateTimeNow extends React.Component {
  render() {
      let dateTimeNow = new Date().toLocaleString()
      return React.createElement(
          'span',
          null,
          `Current date and time is ${dateTimeNow}.`
      )
  }
}