자주 사용하는 React Snippet을 모아놓은 페이지다.

Lifecycle

Mounting

constructor() {
}

// 최초 setState
componentWillMount() {
}

render() {
}

componentDidMount() {
}

				
					
				1
2
3
4
5
6
7
8
9
10
11
12

						constructor() {
}
 
// 최초 setState
componentWillMount() {
}
 
render() {
}
 
componentDidMount() {
}

					

			

Updating

// props이 변경되었을 때 여기서 setState 사용
componentWillReceiveProps(nextProps) {
}

// false로 리턴하면 이후 단계 진행안함.
shouldComponentUpdate(nextProps, nextState) {
}

componentWillUpdate(nextProps, nextState) {
}

render() {
}

componentDidUpdate() {
}

				
					
				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

componentWillUnmount() {
}

				1
2

						componentWillUnmount() {
}

뷰

Redux, Router를 사용하는 뷰

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
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));

					

			

컴포넌트 뷰

import React, {PropTypes} from 'react';

class ViewName extends React.Component {
    static propTypes = {
    };
    render() {
        return (
            <div>
                here
            </div>
        );
    }
}

export default 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;

					

			

자주 사용하는 패턴

조건에 맞게 컴포넌트 노출

{cond ? (
<div>cond이 있을 때 이 컴포넌트를 보여줌</div>
) : null}

				1
2
3

						{cond ? (
<div>cond이 있을 때 이 컴포넌트를 보여줌</div>
) : null}

ref 참조

class Input extends React.Component {
    input = null;

    componentDidMount() {
        this.input.focus();
    }

    render() {
        return (
            <div>
                <input type="text"  ref={(ref) => this.input = ref} />
            </div>
        )
    }
}

				
					
				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

PropTypes.func
PropTypes.array
PropTypes.object
PropTypes.string
PropTypes.number

				
					
				1
2
3
4
5

						PropTypes.func
PropTypes.array
PropTypes.object
PropTypes.string
PropTypes.number

					

			