[React.js] 비동기 통신할 때 로딩스피너 만드는 법(feat.animation)

엄청 쉽다. state를 하나 만들고, 그 값이 비동기 작업이 이루어질 땐 true로 세팅해뒀다가 비동기 작업이 끝나면 false로 세팅하게 하면 된다. 평소엔 false다가 비동기 작업을 할 때만 true가 되는 식으로!

 

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

// 어떤 함수 내에서
setLoading(true);
const uploaded = await 비동기작업;
setLoading(false);

 

그 다음 loading이 true인지 false인지에 따라 다음과 같이 조건부 렌더링을 할 수 있다.

{!loading && <div>평상시</div>}
{loading && <div>로딩중</div>}

 

이를 활용해 로딩중(비동기 작업 중)일 때 로딩스피터가 빙글빙글 돌도록 만들수도 있다!

우선 로딩 여부에 따라 다음과 같이 렌더링된다고 가정하자.

 

{!loading && <div>평상시</div>}
{loading && <div className="loading"></div>}

다음과 같이 CSS를 작성해보자. animation을 활용한다!

.loading {
  /* 높이, 너비 설정 */
  width: 1.5em;
  height: 1.5em;
  /* 정사각형은 border-radius를 50프로로 하면 원모양이 됨 */
  border-radius: 50%;
  border: 3px solid grey;
  /* 원의 4분의 1은 분홍으로 */
  border-top: 3px solid pink;
  /* spin이란 애니메이션을 2초동안 일정한 속도로 수행, 이를 무한히 반복 */
  animation: spin 2s linear infinite;
}

/* spin이란 이름의 애니메이션 만들기 */
@keyframes spin {
  /* 프레임별로 지정 */
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}