React - Loading

React - Loading

React - Loading

로딩 페이지가 1~2초 가량 뜬 후에 데이터를 binding하고 싶을 때
import React, { Component } from 'react';
import Loading from './components/Loading';

class Result extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ...
            timePassed: false
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({ timePassed: true });
        }, 1000);
    }

    render() {
        let { ..., timePassed } = this.state;

        return (
            {timePassed ? (
                <div>...</div>  // true
            ) : (
                <div>...</div>  //false
            )}
        )
    }
}

export default Result;
요렇게 해주면 로딩화면에 1초 뜨고, 데이터를 binding해주는 화면이 보여진다.

댓글

가장 많이 본 글