스파르타 코딩클럽 - 리액트 5주차(4)

1. 페이지 의도적으로 가리기.

1-1. 페이지를 왜 가려야 하나?

• 버킷리스트 앱을 새로고침 해보자!

  redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 3개가 먼저 보인다. 파이어스토어의 데이터만 제대로 보여주고 싶을 때, 어떻게 해야하나? → 페이지를 가려버리는 것이다. 언제까지? 파이어스토어에서 데이터를 가져올 때까지!

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

1-2. 로딩 스피너 만들기.

• (1). 로딩 스피너 컴포넌트 만들기.
  • 우리는 머테리얼 UI의 아이콘을 사용해서 만들어 볼 것이다(링크텍스트).

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;

• (2). firestore 데이터 가져오기 전엔 페이지 진입을 막자.
  • initialState에 is_loaded라는 변수를 추가하고 firestore에서 데이터를 받아오면 갱신한다.

//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에서 보고, 조건부 랜더링을 한다.

//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>
       ...