4. State

React에서는 컴포넌트가 자신을 렌더링 할 때 사용하는 데이터인 상태(State) 개념이 있습니다.
state는 컴포넌트의 내부에 존재하는 점이 props와 다른 점입니다. 이 state를 변경할 때 React는 UI를 재구축하게 되는데 상태의 변경은 setState()를 호출합니다.

      _textChange: function(ev) {
        console.group("_textChange");
        console.log("textarea의 값 변경 시 실행합니다.");
        console.log("setState를 실행합니다.(값이 변경되지 않아도 setState를 호출하면 render가 호출됩니다.)");
        this.setState({
          text: ev.target.value
        });
        console.log("setState로 상태를 변경 시키면 render함수를 다시 실행합니다.");
        console.groupEnd("_textChange");
      },

      render: function() {
        console.group("render");
        console.log("최초 로딩시와 setState가 호출되면 화면을 갱신합니다.");
        console.log("화면을 갱신합니다.");
        console.groupEnd("render");
        return React.DOM.div(null,
          React.DOM.textarea({
            value: this.state.text,
            onChange: this._textChange
          }),
          React.DOM.h3(null, this.state.text.length)
        );
      }

위의 예제를 보면 textarea 객체의 입력 값이 변경되면 _textChange를 호출하도록 되어 있습니다.
_textChange는 setState()를 통해 state를 변경하는 작업을 합니다.
결과적으로 입력 값이 변경됨에 따라 setState가 호출되면 UI가 갱신되는 구조로 되어 있습니다.

---

주의사항

• 값이 바뀌지 않아도 setState()가 호출되면 리액트는 UI를 업데이트합니다.
  
• state 객체의 직접 접근은 사용하지 않습니다. setState()를 통해 접근하여야 내부적인 메커니즘이 사용되므로 this.state에 직접 업데이트 하는 것은 예기치 못한 상황을 불러오게 됩니다. (this.props의 경우와 비슷합니다.)
  
• 계산한 값이나 컴포넌트는 state에 저장하지 않고 컴포넌트가 기능하는데 필요한 단순 데이터를 저장하도록 합니다.

예제코드링크