[React.js] React.js에서 API 로딩 처리하기

React.js 에서 API 로딩 처리하기

---

• 웹 브라우저에 API가 호출되어서 랜더링이 진행되어야 하는데 그렇지 않은 경우에 사용자에게 로딩 화면만 출력이 되도록 구성해보겠다.
• https://material-ui.com/components/progress/ 를 이용해서 API 로딩 처리를 진행해보겠다.

---

0️⃣ 필요한 라이브러리 불러오기

필요한 라이브러리를 import 해준다.

import CircularProgress from '@material-ui/core/CircularProgress';

---

1️⃣ state를 추가하기

progress bar는 0%부터 100%까지 충전이 되듯이 애니메이션이 보여지게 된다. 그렇기 때문에 completed라는 변수를 만들어서 0이라는 값을 넣어 주었다.

 state = {
    completed : 0
  }

---

2️⃣ progress 함수를 만들기

1. completed state 변수를 가져올 수 있도록 한다.

   progress = () => {
    const { completed } = this.state;
   }

2. 계속해서 progress() 함수가 불러와지면서 completed 값이 변할 수 있도록 설정해준다. completed가 100이 되는 순간 0으로 줄어들 수 있도록하고, 그렇지 않으면 계속해서 1씩 증가할 수 있도록 설정한다

   progress = () => {
    const { completed } = this.state;
    this.setState({ completed : completed >= 100 ? 0 : completed + 1 });
   }

---

3️⃣ componentDidMount()에 타이머를 이용하여 progress 함수를 호출할 수 있도록 한다.

componentDidMount(){
  // 0.02초 마다 progress 함수가 실행 될 수 있도록 설정 
    this.timer = setInterval(this.progress, 20);
   }

---

4️⃣ 랜더링 되는 부분에 progress bar가 출력될 수 있도록 설정한다.

: 이후의 값 즉 this.state.customers가 호출되지 않았을 때의 출력값을 설정해준 것이다.

<TableBody>
    {
        this.state.customers ? true이면 이 부분 실행 

        :      
        <TableRow>
            <TableCell colSpan = "6" align = "center">
               <CircularProgress className = { classes.progress } varient = "determinate" value = {this.state.completed}/>
            </TableCell>
       </TableRow>
    }
</TableBody>

---

5️⃣ 마무리

이를 통해서 간단하게 loading창을 구현해볼 수 있었다.