[React] props와 state

React는 [부모 컴포넌트 -> 자식  컴포넌트] 방향으로만 데이터를 전달하는 것을 지향한다.

이렇게 하면 컴포넌트들이 매우 단순해질 수 있기 때문이다.

자식 컴포넌트로 데이터를 전달하기위해 사용하는 props와 state에 알아보자.

props

 

• properties를 줄여서 표기한 것.
• 컴포넌트에 전달되는 데이터.

 - props를 전달받은 컴포넌트에서 props를 직접 수정하지 않도록 한다.

 - 값을 변경하고 싶다면 state를 사용한다.

PropTypes

• props의 유효성 검증
• isRequired를 사용하여 필수속성을 나타낼 수 있다.
• API 설명의 도구로 활용할 수 있음.
• ex)  

  var Painter = React.createClass({
      propTypes: {
          inkColor: React.PropTypes.color({
              id: React.PropTypes.number.isRequired
          }).isRequired,
          onClick: React.PropTypes.func
      },
      // .....
  });

state

• 컴포넌트 내부에 존재하는 데이터의 상태.

 - setState() 메소드로 값을 변경할 수 있다. (직접 접근도 가능)

 - setState를 호출할 때마다 render메소드가 호출되므로 자동으로 DOM이 갱신되므로  직접접근 보다는 setState호출이 좋다.

 - 계산한 값 또는 컴포넌트등이 아닌 단순 표현값을 저장하는것이 좋다. (아래 예시에서의 showMark같은..)

 - props의 데이터를 state에 복사해야한다.

 - ex) 

var FavoriteMark = React.createClass({
    getInitialState: function () {
        return {
            showMark: false
        };
    },
    render: function () {
        var favoriteMark;
        if (this.state.showMark) {
            favoriteMark = <favoritemark></favoritemark>;
        }
        return (
            <div className="favoritemark"> onClick={this.handleClick};
                <label>  </label>
            </div>
        );
    },
    handleClick: function () {
        this.setState({ showMark: true };
    }
});