React.고객관리시스템(Circular, 로딩화면만들기)

gandalfzzing·2020년 2월 14일
0

React

목록 보기
10/20

<로딩 화면 만들기>

저번 글에서는 단순히 isLoading을 줬을 때에 "" 공백이 출력하게 했는데, 이제는 material-ui에서 제공하는 컴포넌트를 사용해서 로딩화면을 만들겠습니다.
먼저 https://material-ui.com/api로 가면 여러가지 제공하는 API들이 있습니다. 그 중 로그인 싸이클을 그려주는 CircularProgress를 사용하도록 하겠습니다. 해당 강좌는 이곳에 props를 주는 내용의 대해 설명이 없어서 몇 가지 설명하고자 합니다.
일단 아래와 같이 코드를 짭니다.

그리고 저번에 만든어 놨던 isloading "" 을 바꾸어 줍니다. colspan과 aligen를 이용하여 6개의 컬럼을 다 차지하고 중앙에 생성하도록 props를 준 뒤, import한 CircularProgress 컴포넌트를 넣고 원하는 props를 주면 됩니다.

https://material-ui.com/api/circular-progress/ 에 가면 각 props와 Css를 적용하는 방법이 나와있습니다. value의 경우 0이 기본값인데 state의 변화를 줘야하기 때문에 state와 연결했고, variant는 싸이클이 돌면서 나타나는 애니메이션의 선택지인데 determinate를 주면 원이 돌면서 서서히 완성이 됩니다.

<테스트 화면>

이 이후 강좌부터는 AWS와 DB를 함께 엮는 풀스텍 강좌가 되어버려서, 제가 공부하고자 하는 스케쥴과는 달라 일단은 고객관리는 여기서 중단하도록 하겠습니다. 본래 스케쥴은 이번 주 까지 React 기본을 끝내고 노마더코드의 풀스택 React + node.js + Apollo + etc등 거대 프로젝트를 하면서 react를 쓰려고 했습니다만 이번 React를 하면서 Hook도 아직 잘 모르고 React도 완전히 깨닫는게 아니라서 React를 다루는 기술이라는 책을 가지고 진행해보도록 하겠습니다!
React 학습을 계속 됩니다...!

0개의 댓글