[REACT] Material UI를 설치하고 로딩하기 전에 스피너화면 보여주기

https://material-ui.com/

Material-UI: A popular React UI framework

1. 패키지 설치

yarn add @material-ui/core @material-ui/icons

 

 

 

2. Spinner만들기

 

Spinner.js

import React from "react";
import styled from "styled-components";
import {Eco} from "@material-ui/icons";
 
const Spinner = (props) => {
 
    return (
      <Outter>
        <Eco style={{ color: "#673ab7", fontSize: "150px" }} />
      </Outter>
    );
}
 
const Outter = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ede2ff;
`;
 
export default Spinner;

 

 

---

페이지를 로딩을 완료하기 전에 의도적으로 가릴 것이다 (스피너 페이지를 보여줄 것이다)

 

 

 firestore 데이터를 가져오기 전에 페이지 진입을 막는다.

3. 리덕스 모듈에서 initialState에 is_loaded를 설정해준다.

 

 

 

4. 리듀서에서 단어들을 가지고올때 is_loaded를 true로 바꿔준다

 

 

 

 

5. App.js에서 리덕스에 있는 상태값을 가져온다.

 

 

6. App.js에서 조건부 렌더링을 해준다

this.props.is_loaded가 false이면 Spinner을 보여주고 아니라면

원래있던 return값들을 보여주는데

JSX에서는 하나의 객체만 리턴할 수 있기 때문에

<React.Fragment>로 감싸준다.

 

 

 

 

 

 

 

결과