속성에 하드 코딩한 값을 사용하는 것은 유연하지 않다. 링크 컴포넌트를 재사용하려면 href가 매번 다른 주소를 반영하도록 변경해야 한다. 이를 하드 코딩한 값이 아닌 동적으로 설정한 값이라고 부른다. 다음으로, 속성에 동적으로 생성한 값을 사용할 수 있는 컴포넌트에 대해 살펴보자. 이 값은 컴포넌트 속성(this.props)에서 가져올 수 있다. 이후로는 어려울 것이 없다. 화살괄호(<>) 안에 중괄호({})를 작성하여 속성에 동적으로 생성한 값을 엘리먼트에 전달하면 된다.

예를 들어 사용자 계정에 연결할 때 사용할 컴포넌트를 만든다고 가정하자. href와 title은 사용자에 따라 달라져야 하므로 하드 코딩할 수 없다. 동적 컴포넌트인 ProfileLink는 <a> 태그에 href와 title을 렌더링하기 위해 각각 url과 label을 속성으로 사용한다. ProfileLink에 중괄호를 사용하여 <a>에 속성을 전달한다.

class ProfileLink extends React.Component {
  render() {
      return <a href={this.props.url}
          title={this.props.label}
          target="_blank">Profile
      </a>
  }
}

 

속성 값은 어디서 전달한 것일까? 속성 값은 ProfileLink 생성 시에 정의된다. 즉, ProfileLink를 생성하는 부모 컴포넌트에서 이 값을 정의하는 것이다. 예를 들면 이 방법으로 ProfileLink 인스턴스 생성 시에 url과 label 값이 전달되어, 그 결과 <a> 태그에 해당 값을 렌더링한다.

<ProfileLink url='/users/azat' label='Profile for Azat'/>