또는 화살표 함수를 중괄호({})와 함께 사용해서 명시적으로 return을 작성하고, 괄호를 추가하면 좀 더 읽기 쉬워 보인다.

const Link = (props)=> {
  return (
      <a href={props.href}
          target="_blank"
          className="btn btn-primary">
              {props.text}
      </a>
  )
}

 

상태비저장 컴포넌트는 상태를 가질 수 없다. 그렇지만 propTypes와 defaultProps를 프로퍼티로 가질 수 있다(각각에 대해서는 8.1절과 8.2절을 참고하기 바란다). 이 둘을 컴포넌트 객체에 추가할 수 있다. 한편 엘리먼트를 return과 같은 라인에서 시작하면 return 뒤에 여는 괄호를 넣지 않아도 된다.

function Link (props) {
  return <a href={props.href}
      target="_blank"
      className="btn btn-primary">
          {props.text}
  </a>
}
Link.propTypes = {...}
Link.defaultProps = {...}