자주 사용하는 React Snippet

Apr 10, 2017

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

Lifecycle

Mounting

constructor() {
}

// 최초 setState
componentWillMount() {
}

render() {
}

componentDidMount() {
}

Updating

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

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

componentWillUpdate(nextProps, nextState) {
}

render() {
}

componentDidUpdate() {
}

Unmounting

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

컴포넌트 뷰

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}

ref 참조

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
See Also