다시 시작하는 리액트 - 리액트 실무 기초 5-3

 

5-3. 페이지 의도적으로 가리기

 

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

 

버킷리스트 앱을 새로고침해보면 redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 1개가 먼저 보임.

파이어스토어의 데이터만 제대로 보여주고 싶을 때 어떻게 하면 좋을까?

=> 파이어스토어에서 데이터를 가져올 때까지 페이지를 가려버리면 됨.

 

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

(네트워크 속도가 느린 곳에서 사이트를 이용시 하나의 글을 작성하고 그게 등록되어 화면에 보이기까지

시간이 꽤 오래 걸릴 수 있음. 사람들은 그걸 보고 글이 올라가지 않았다고 생각을 하고 글을 여러 번 등록하게 됨.)

 

 - 파이어스토어 데이터를 가져오기까지 보이는 화면. 리덕스에 넣어둔 데이터가 없다면 보이는 데이트가 없을 거임.

 

 

2. 로딩 스피너 만들기.

 

2-1) 로딩 스피너 컴포넌트 만들기.

 

머테리얼 UI의 아이콘을 사용해서 로딩 스피너 컴포넌트를 만들어볼 거임.

일단 버킷리스트의 터미널에서 머테리얼 UI를 설치해줌.

 

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

 

설치한 후에는 @material-ui/icons에서 사용할 icon을 import해주면 됨.

우리는 Eco하는 icon을 사용할 거임.

 

import { Eco } from "@material-ui/icons";

 

스타일 컴포넌트를 이용하여  Wrap을 만들어준 다음에 스타일을 지정해주고,

Wrap 내에 Eco icon을 배치해줌. 

전체화면에 꽉 채울 거라는 생각을 바탕으로 스타일을 지정해줬음.

 

import React from "react";
import styled from "styled-components";
import { Eco } from "@material-ui/icons";

const Wrap = styled.div` 
  width: 100%; 
  height: 100%; 
  background-color: #ede2ff; 
 
  display: flex; 
  align-items: center; 
  justify-content: center; 
 
  position: fixed; 
  top: 0; 
  left: 0;
`;

export default function Spinner() { 
  return (   
    <Wrap>     
      <Eco style={{ color: "#673ab7", fontSize: "150px" }} />   
    </Wrap> 
  );
}

 

이렇게 Spinner라는 component를 만들어줬다면

이제 widgets으로 이동하여 initialState에 is_loaded : false를 하나 추가해줌.

 

그리고 reducer의 LOAD type으로 이동하여 파이어스토어의 데이터를 가져오면서 is_loaded가 true로 변하게끔 해줌.

 

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

 

 

그 다음, App.js로 이동하여 useSelector hook을 이용하여 redux에 있는 is_loaded 값을 가져옴.

그 값을 변수 is_loaded에 담아주고(현재 값은 false) input의 아래에 { !is_loaded && <Spinner /> } 코드를 작성해줌.

is_loaded 값이 false일 때 Spinner component가 보이도록 해주겠다는 얘기임.

=> Firestore에 있는 데이터들을 받아오기 전까지 Spinner component를 로딩 페이지로 보여주겠다는 얘기.

 

이렇게 해주면 페이지 렌더링시 일정 속도로 Firestore의 데이터를 받아올 거고,

받아오기 직전에는 Spinner가, 받아온 후에는 받아온 데이터가 보이게 될 거임.

 

Firestore 데이터를 받아오기 전 화면에 보이는 Spinner component

Firestore 데이터를 전부 받아온 후의 화면