Lifecycle
Mounting
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor() { } // 최초 setState componentWillMount() { } render() { } componentDidMount() { } |
Updating
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// props이 변경되었을 때 여기서 setState 사용 componentWillReceiveProps(nextProps) { } // false로 리턴하면 이후 단계 진행안함. shouldComponentUpdate(nextProps, nextState) { } componentWillUpdate(nextProps, nextState) { } render() { } componentDidUpdate() { } |
Unmounting
1 2 |
componentWillUnmount() { } |
뷰
Redux, Router를 사용하는 뷰
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import React, {PropTypes} from 'react'; import {connect} from 'react-redux'; import {withRouter} from 'react-router'; class ViewName extends React.Component { static propTypes = { dispatch: PropTypes.func }; componentDidMount() { const {dispatch} = this.props; } render() { return ( <div> here </div> ); } } export default connect(state => state)(withRouter(ViewName)); |
컴포넌트 뷰
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, {PropTypes} from 'react'; class ViewName extends React.Component { static propTypes = { }; render() { return ( <div> here </div> ); } } export default ViewName; |
자주 사용하는 패턴
조건에 맞게 컴포넌트 노출
1 2 3 |
{cond ? ( <div>cond이 있을 때 이 컴포넌트를 보여줌</div> ) : null} |
ref 참조
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class Input extends React.Component { input = null; componentDidMount() { this.input.focus(); } render() { return ( <div> <input type="text" ref={(ref) => this.input = ref} /> </div> ) } } |
PropTypes
1 2 3 4 5 |
PropTypes.func PropTypes.array PropTypes.object PropTypes.string PropTypes.number |