react의 라이프 사이클을 이해하고 api 로딩처리를 구현해보는 시간입니다.
만약에 고객들이 사이트에 접속했을때 속도가 느릴경우에 loading이미지가 나오게 만들도록 하겠습니다.
이미 material ui에서 이미지가 있기때문에 그걸 이용하면 훨씬 쉽게 만들 수 있습니다.
material ui progress를 확인해보겠습니다.
material-ui.com/components/progress/
Circular, Linear progress React components - Material-UI
Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
material-ui.com
여기중에서 cirular indeterminate을 사용해보도록 하겠습니다.
예외처리에서 빈칸으로 보여주었던 부분을 TableRow를 추가하여 CircularProgress의 이미지가 들어갈 수 있게 만들어 줍니다.
사용설명서에 따라 다음 내용을 추가합니다.
'React > REST API' 카테고리의 다른 글
| Node.js Express 서버 개발환경 및 REST API 구축하기 (0) | 2021.02.12 |
|---|