상태비저장 컴포넌트(stateless component)는 상태 객체가 없으며, 컴포넌트 메서드 또는 다른 React의 라이프사이클 이벤트 또는 메서드를 갖지 않는다(5장 참조). 상태비저장 컴포넌트의 목적은 오직 뷰를 렌더링하는 것이다. 이 컴포넌트가 할 수 있는 것은 속성을 전달받아 처리하는 것뿐이다. 상태비저장 컴포넌트는 속성을 입력받아 UI 엘리먼트를 출력하는 간단한 함수다.

상태비저장 컴포넌트는 예측할 수 있다는 이점이 있는데, 출력을 결정하는 입력이 한 가지뿐이기 때문이다. 예측가능성은 곧 이해가 쉽고, 유지보수와 디버깅이 편리하다는 것을 의미한다. 실제로 상태를 가지지 않는 것이 React의 가장 바람직한 사례라고 볼 수 있다. 상태비저장 컴포넌트는 더 많이 사용할수록, 상태저장 컴포넌트는 더 적게 사용할수록 더 좋다.

이 책의 1~3장에서 상태비저장 컴포넌트를 많이 작성해보았다. 예를 들어 HelloWorld는 상태비저장 컴포넌트다(ch03/hello-js-world-jsx/jsx/script.jsx).

 

예제 코드 4.4 상태비저장 Hello World

class HelloWorld extends React.Component {
    render() {
        return <h1 {...this.props}>Hello {this.props.frameworkName} world!!!</h1>
    }
}

---