1-1. 페이지를 왜 가려야 하나?
버킷리스트 앱을 새로고침 해보자!
redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 3개가 먼저 보인다. 파이어스토어의 데이터만 제대로 보여주고 싶을 때, 어떻게 해야하나? → 페이지를 가려버리는 것이다. 언제까지? 파이어스토어에서 데이터를 가져올 때까지!
1-2. 로딩 스피너 만들기.
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;
//bucket.js
...
const initialState = {
is_loaded: false,
list: [
{ text: "영화관 가기", completed: false },
{ text: "매일 책읽기", completed: false },
{ text: "수영 배우기", completed: false },
],
};
...
case "bucket/LOAD": {
if (action.bucket.length > 0) {
return { list: action.bucket, is_loaded: true };
}
return state;
}
//App.js
...
// 이 함수는 스토어가 가진 상태값을 props로 받아오기 위한 함수예요.
const mapStateTopProps = (state) => ({
bucket_list: state.bucket.list,
is_loaded: state.bucket.is_loaded,
});
...
render() {
// 콘솔로 확인해요!
console.log(this.props.is_loaded);
return (
<div className="App">
<Container>
<Title>내 버킷리스트</Title>
{/* firestore에서 데이터를 가져온 후에만 페이지를 보여줄거예요! */}
{!this.props.is_loaded ? (
<Spinner />
) : (
<React.Fragment>
<Progress />
<Line />
<Switch>
<Route path="/" exact component={BucketList} />
<Route path="/detail/:index" component={Detail} />
<Route component={NotFound} />
</Switch>
</React.Fragment>
)}
</Container>
...