더북(TheBook)

이와 다르게 JSX에서는 중괄호({}) 표기법을 사용하여 변수를 동적으로 출력할 수 있으므로 코드가 늘어나는 것을 상당히 줄일 수 있다.

class DateTimeNow extends React.Component {
  render() {
      let dateTimeNow = new Date().toLocaleString()
      return <span>Current date and time is {dateTimeNow}.</span>
  }
}

 

지역변수뿐만 아니라 속성도 출력할 수 있다.

<span>Hello {this.props.userName}, your current date and time is {dateTimeNow}.</span>

 

그뿐만 아니라 자바스크립트 표현식이나 그 외 어떤 자바스크립트 코드라도 중괄호 안에서 실행시킬 수 있다. 예를 들어 다음 예제 코드처럼 날짜 형식을 적용할 수도 있다.

<p>Current time in your locale is {new Date(Date.now()).toLocaleTimeString()}</p>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.