3.2.4 JSX에서 속성 사용하기

앞서 JSX를 소개하면서 이 주제에 대해 잠시 살펴보았다. 엘리먼트 속성을 정의할 때는 속성 문법을 사용한다. 즉, JSX 태그 안에 key1=value1 key2=value2... 같은 표기법을 사용하여 HTML 속성과 React 컴포넌트 속성을 정의한다. 이것은 HTML/XML의 속성 문법과 유사하다.

다시 말해 JSX에서 속성을 전달하는 방법은 일반 HTML을 작성하는 방법과 같다. 또한, 엘리먼트 속성을 입력해서 표준 HTML 속성을 렌더링한다. 이 부분은 2.3절에서도 살펴보았다. 예를 들어 다음 예제 코드는 앵커 요소 <a>에 표준 HTML 속성 href를 입력하는 경우다.

ReactDOM.render((
  <div>
      <a href="http://reactquickly.co">Time for React?</a> ---- 표준 HTML 속성인 href를 렌더링한다.
      <DateTimeNow userName='Azat'/> ---- userName 속성의 값을 설정한다.
  </div>
  ),
  document.getElementById('content')
)