리액트 : 로딩화면 스피너 추가하기

1. 로딩화면 컴포넌트 생성 (Loading.jsx)

import React from 'react';

import styled from 'styled-components';

import Spinner from '../assets/imgs/Loading/Spinner.gif';

const Loading = () => {

  return (

    <ScDivBackground>

      <img src={Spinner} alt="로딩중" width="5%"></img>

    </ScDivBackground>

  );

};

const ScDivBackground = styled.div`

  position: absolute;

  width: 100vw;

  height: 100vh;

  top: 0;

  left: 0;

  background-color: #ffffffb7;

  z-index: 999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

`;

export default Loading;

 

2. styled-components 추가 (yarn add styled-components)

(1) 배경 : ScDivBackground

(2) 로딩중 이미지 : img src => 스피너 홈페이지에서 gif 다운로드한 파일

 

3. 스피너 다운로드 (회원가입 후 free 사용하기)

https://loading.io/

 

(1) 원하는 스피너 선택후 background 투명율 제일 낮추기

(2) GIF 클릭해서 저장

(3) vscode에 src - assets - imgs - Loading - Spinner.gif 파일 넣고 코드에서 import하기

 

4. 로그인 / 회원가입 / 회원정보 변경하는 파일에서 사용하기 

(로그인 시 : Login.jsx)import React, {useState} from 'react';

import {createUserWithEmailAndPassword} from 'firebase/auth';

import {auth} from '../shared/firebase';

 

import styled from 'styled-components';

import Loading from '../components/Loading';

const Join = () => {

  

  const [loading, setloading] = useState(false);

  //로그인 버튼

  const signUp = async data => {

    try {

      setloading(true);

     

      await createUserWithEmailAndPassword(auth, data.email, data.password);

      setJoinData(JSON.parse(JSON.stringify(data.nickname)));

     

      setloading(false);

     

    } catch (error) {

      

      setloading(false);

    }

  };

  return (

    <StDivWrap>

      {loading ? <Loading /> : null}

 

      <StDivTop>

        <h1>Welcome at YalolJa</h1>

      </StDivTop>

 

    </StDivWrap>

  );

};

const StDivWrap = styled.div`

  width: 600px;

  height: 100vh;

  margin: auto;

  padding-top: 60px;

`;

const StDivTop = styled.div`

  font-weight: 400;

  font-size: 20px;

  & p {

    font-size: 15px;

    margin-top: 8px;

  }

`;

export default Join;

 

(1) Loading.jsx화면 import

(2) useState를 활용해서 관리 => loading & setloading

(3) return문 아래 {loading? <Loading> : null}

-> 삼항연산자 사용해서 true이면 로딩스피너 보여주고 아니면 null처리해서 안보여주기

(4) 로그인 버튼 클릭시 : setloading(true)로 해서 보여줌 +  비동기처리 끝나면 setloading (false) 처리하여 숨김

(5) 오류가 난 케이스에는 :  setloading (false) 해줘야 오류가 나고 안 보이게 됨

 

끝.