React는 함수형 스타일을 사용하여 상태비저장 컴포넌트를 위한 더 간결한 문법을 제공한다. 즉, 인자로 속성을 전달받아 뷰를 반환하는 함수를 생성할 수 있다. 상태비저장 컴포넌트는 다른 컴포넌트와 똑같이 렌더링된다. 예를 들어 HelloWorld 컴포넌트는 <h1>을 반환하는 함수로 다시 쓸 수 있다.

const HelloWorld = function(props){
  return <h1 {...props}>Hello {props.frameworkName} world!!!</h1>
}

 

ES6+/ES2015+의 화살표 함수를 사용하여 상태비저장 컴포넌트를 작성할 수 있다. 다음 예제 코드는 앞의 예제 코드와 동일하다(return 키워드도 제거할 수 있지만, 난 남겨두는 것을 선호한다).

const HelloWorld = (props)=>{
  return <h1 {...props}>Hello {props.frameworkName} world!!!</h1>
}