React BootStrap : 화면 중앙에 나타나는 로딩 스피너

인라인 스타일링

import { Spinner } from 'react-bootstrap';

..


  if (isLoading) return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <Spinner animation="border" />
    </div>
  );

 

스피너는 기본적으로 부트스트랩 문서에 있지만, 화면 정중앙 정렬하는 속성이 복잡해서 작성한다.

스타일드 컴포넌트로 재사용

만약 저 스타일을 여러 군데서 쓸 것 같다거나, 인라인 스타일링이 복잡해서 분리하고 싶은 경우 Styled-components로 정의하고 export 한 후 다른 곳에서 재사용 해도 된다.

import styled from 'styled-components';

const SpinnerContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

  if (isLoading) return (
    <SpinnerContainer>
      <Spinner animation="border" />
    </SpinnerContainer>
  );

 

 

쓰려는 컴포넌트에서는 import 후 바로 사용하면 된다.

import SpinnerContainer from './SpinnerContainer'; // 경로를 실제 파일 위치에 맞게 조정

function AnotherComponent({ isLoading }) {
  if (isLoading) return (
    <SpinnerContainer>
      <Spinner animation="border" />
    </SpinnerContainer>
  );
 
	 ...
 
 }