[React.js ] spinners (로딩 시 대체 효과)

안녕하세요!!

 

오늘은 제 프로젝트에 적용된 스피너를 소개해 드릴까 합니다.

 

axios를 사용하여 server 쪽으로 비동기 통신을 할 때 딜레이 시간이 생기는데....
딜레이 시간 동안 유저에게 좀 더 쾌적하게 화면을 보여주기 위해서 적용해 봤어요!!

 

 

 

client단코드

 

styled components를 사용해서 스피너 컴포넌트를 따로 만들었습니다.
로딩 중일 때 띄울 스피너 이미지를 처음에는 아무거나 가져다 썼더니... 사이즈 변경 시 깨져서
알아보다 보니 svg가 안 깨진다고 해서 가져와서 쓰고 있습니다~~ 안 깨지니까 너무 좋아..

 

 

제가 사용한 이미지

클릭하면 보여요!!

스피너 테스트할 때 계속 보다 보니까 멍해져서 "뭐 하고 있었지??"

정신 줄 놓는.... 조심하세요..

이미지 import 한 뒤에 저 표시만 있으면 지금 페이지가 뭘 하는지 

모르시는 분들도 계실까 봐 텍스트도 하나 넣어줍니다.. (로딩 중..)   

   

중하니까 또 생각나는 게.. 중학교 때 학교에서 집까지 뛰어서 5분거리였는데...

ㅋㅋ 꼭 가깝다고 다 좋은 건 아닌가 바요..

 

아 맞다 위에 스피너 이미지 인x런에서도 쓰나 봐요 

자바스크립트 공부 더 하려고 결제했는데
영상 로딩 시에 저 이미지 뜨더라구요..... ᄏᄏ

 

 

무튼 스피너 component 만들고

   

    import React from "react";

    import { Background, LoadingText } from "./LoadingCSS";

   

    //svg가 안깨짐.. good!!!!

    import Spiner from "./Ripple.svg";

    const Loading = () => {

      return (

        <Background>

          <img src={Spiner} alt="로딩중" width="300vh" />

          <LoadingText>로딩중..</LoadingText>

        </Background>

      );

    };

   

    export default Loading;

   

 

스피너를 사용할 mainpage component로 돌아와서 (import는 생략...)

상태 관리하기 위해 useState를 사용하고, 기본값(false)를 줍니다.

 

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

 

 

axios 비동기 통신 부분에다가

 

const getPostList = () => {

 

    let body = {

       

        서버에 보낼 선물들(코드생략)

 

    };

    axios

      .post("/api/post/list", body)

      .then((res) => {

 

        if (res.data.success) {

 

         서버에서 res(응답)받고 

         작업이 끝나면...(코드생략)

          

         기본값 false를 true로 재설정!!

          setLoading(true);

        }

      })

      .catch((err) => {

        console.log(err);

      });

  };

 

 

 

JSX코드 작성 부분에..

위에 state 관리하려고 만든 loading을

삼항연산자를 활용하여

loading ? <loading true일 때 보여줄 부분> : <false일 때 spinner보여주기>

 

 return (

    <>

      {loading ? (

        <>

            <FooterDiv>

 

            true시에 보여질 부분

 

            </FooterDiv>

          )}

        </>

      ) : (

            스피너

        <Loading />

      )}

    </>

  );

 

이런방법으로 loading true시에 보여줄 부분만 넣어주면 끝!!

 

 

 

 

 

스피너 적용 확인