React.js state, props관련

xxxxxxxxxx
this.state = {
    data:
    [
        {"name": "A", "pw": "p1"},
        {"name": "B", "pw": "p2"}
    ]
}
​
​
render() {
    return(
        <div>
        {this.state.data.map((person, i) => <TableRow key={i} data={person}> )}
        </div>
    )
}
​
........
​
​
class TableRow extends React.Component {
    render() {
        return (
            <tr>
                <td>{this.props.data.name}</td>
                <td>{this.props.data.pw}</td>
        )
    }
}

 

this.state.data.map( (person, i) => 리턴내용 )

여기서 person은 맵핑할때 각 튜플(더 적합한 용어를 모르겠다)을 나타내고

i는 child 컴포넌트에 identity를 부여하기 위해 사용된다.

 

따라서, <TableRow key={i} data={person} /> 과 같이 사용할 수 있다.

 

 

---

 

Props

this.state 에서 부르는 것 말고도

 

ReactDOM.render()에서 props을 추가하는 방법이 있다.

 

xxxxxxxxxx
ReactDOM.render(<App headerProp = "ABC" contentProp = "BBB" />, document.getElementById("app"))

위와 같은 방법으로 컴포넌트에 추가하면 된다.

 

Props의 타입을 지정해주는 것과 기본props 값을 지정할 수도 있다.

x
App.propTypes = {
    headerProp: React.PropTypes.string,
    contentProp: React.PropTypes.string.isRequired
}
​
App.defaultProps = {
    headerProp: "ABC",
    contentProp: "BBB"
}

 

 

props와 state의 차이.