9. React의 라이프 사이클 이해 및 API 로딩 처리 구현

1. Progress var 생성하기 

https://mui.com/material-ui/react-progress/

Circular, Linear progress React components - Material UI

이중에서 'circular determinate'를 이용해보자 

 

* react 의 lifecycle이란 ?

1. constructor 가 불러와지면 

2. componentWillMount()

3. render() // component하면에 실제로 그림 

4.componentDidMount()

순으로 동작한다. 

props or state 가 변동이 된다면 shouldComponentUpdate() 함수를 불러 

> 다시 3. render함수를 불러 view를 갱신한다. 

 

import CircularProgress from "@mui/material/CircularProgress";

class App extends Component {
  state = {
    customers: "",
    completed: 0, // progress var가 loading 할때 처음 시작은 0
  };
  
  componentDidMount() {

    this.timer = setInterval(this.progress, 20);
    // 0.02초 마다 progree가 실행될수 있도록 설정 
  }
  
  progress = () => {
    const { completed } = this.state;
    this.setState({ completed: completed >= 100 ? 0 : completed + 1 });
  };
  
  render(){
   return (
    <TableRow>
         <TableCell colSpan="6" align="center">
            <CircularProgress
                    value={this.state.completed}
                    variant="determinate"
                  />
         </TableCell>
     </TableRow>
   )
  }