5주차 - 페이지 의도적으로 가리기

1) 페이지를 왜 가려야 하나요??

-> 버킷리스트 앱을 새로고침 해보면

redux에 넣어 뒀을 경우 가까 데이터가 보이게 됩니다. 파이어 스토어의 데이터만 제대로 보여주고 싶을 때는 어떻게 하면 좋을까요??

-> 파이어스토어에서 데이터를 가져 올 때까지 페이지를 가려 버리면 됩니다.

(이외에도 수정이나 추가하기 버튼을 눌렀을 때, 여러번 API를 호출하는 현상을 방지하기 위해서 페이지를 가립니다.)

 

2) 로딩 스피너 만들기

 

- 로딩 스피너 컴포넌트 만들기 (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;

 

-> material icons 들어가서 아이콘 import 해오면 됨

https://mui.com/api/icon/

Icon API - MUI

 

- firestore 데이터 가져오기 전엔 페이지 진입을 막자!

: initialState에 is_loaded라는 변수를 추가하고 firestore에서 데이터를 받아오면 갱신합니다.

//bucket.js
...
const initialState = {
  is_loaded: false,
  list: [],
};
...
	case "bucket/LOAD": {
      return { list: action.bucket, is_loaded: true };
    }

변수를 App.js에서 보고, 조건부 랜더링을 합니다.

...
import { useDispatch, useSelector } from "react-redux";
...
import Spinner from "./Spinner";
...

function App() {
  const text = React.useRef(null);
  const dispatch = useDispatch();
  const is_loaded = useSelector(state => state.bucket.is_loaded);

  React.useEffect( () => {
    dispatch(loadBucketFB());
  }, []);

  const addBucketList = () => {   
    dispatch(addBucketFB({ text: text.current.value, completed: false }));
  };
  return (
    <div className="App">
      ...
      {/* 인풋박스와 추가하기 버튼을 넣어줬어요. */}
      <Input>
        <input type="text" ref={text} />
        <button onClick={addBucketList}>추가하기</button>
      </Input>
      {!is_loaded && <Spinner />}
    </div>
  );
}
...

export default App;