ㄷㅣㅆㅣ's Amusement

[React] props와 state 본문

Programming/React

[React] props와 state

ㄷㅣㅆㅣ 2016. 4. 22. 12:53

[React] props와 state

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


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

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


props

 

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

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

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

PropTypes


  • props의 유효성 검증
  • isRequired를 사용하여 필수속성을 나타낼 수 있다.
  • API 설명의 도구로 활용할 수 있음.
  • ex)  
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var Painter = React.createClass({
        propTypes: {
            inkColor: React.PropTypes.color({
                id: React.PropTypes.number.isRequired
            }).isRequired,
            onClick: React.PropTypes.func
        },
        // .....
    });
    cs



state


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

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

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

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

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

 - ex) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 };
    }
});
 
cs


0 Comments
댓글쓰기 폼