즐거운인생

본 포스트는 React 애플리케이션 작성 시 로딩 다이얼로그, 프로그레스를 표시할 때 사용할 수 있는 오픈 소스인 React Spinners 사용에 대한 글입니다.

애플리케이션에서 서버 인터페이스나 모바일 Device의 기능을 사용하기 위해서 인터페이스 할 때, 아니면 내부적으로 무언가를 분석해야 해서 사용자와의 인터페이스를 잠시 막아두고 싶은 경우 Loading Dialog를 많이 사용합니다. jQuery를 사용할 때도 괜찮은 오픈 소스가 있어서 사용하거나, 아니면 그냥 Layer를 하나 뒤집어 씌운 다음에 괜찮은(?) 그림이나 애니메이션 하나를 올리는 방법을 사용했습니다.

React 애플리케이션에서 사용하기 괜찮은 오픈 소스가 하나 있어 소개합니다. 사실 코드에 대한 설명은 더 필요없을 정도로 깔끔하게 아래 사이트에 정리되어 있습니다.

https://mhnpd.github.io/react-loader-spinner/docs/intro

저 같은 경우는 Audio Component가 마음에 들어서, 해당 Component를 아래와 같이 사용해 보았습니다. 먼저 Loading Progress로 사용할 Component를 하나 생성합니다.

const Loading = () => {
    return (
        <div className="loadingContainer">
            <Audio
                height="60"
                width="60"
                color="#FFF"
                ariaLabel="audio-loading"
                wrapperStyle={{}}
                wrapperClass="wrapper-class"
                visible={true}
            />
        </div>
    )
};

Audio Component를 사용하고 백그라운드를 애플리케이션에 어울리는 형태로 커스터마이징 하기 위해서 loadingContainer라는 style을 사용하는 div로 한 번 감쌌습니다. 해당 CSS는 아래와 같습니다.

.loadingContainer {
    width:100%;
    height:100%;
    overflow:hidden;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,0,0,0.4);
    z-index:100;
    text-align:center;
}
.loadingContainer svg {
    position:absolute;
    top:calc(50% - 30px);
    left:calc(50% - 30px);
}

백그라운드를 화면 전체에 반투명으로 적용하고 Component의 위치를 선언했습니다. 이제 Loading Component를 사용할 Component 내부에 state를 선언합니다.

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

처음에는 Loading Component는 표시되지 않아야 하므로 초기 state는 false로 선언합니다. 이제 UI를 블록할 필요가 있는 부분에 Loading Component를 적용합니다. 아래 예시는 모바일 데이터를 통해 현재 위치를 가져오는 부분에 적용한 예시입니다.

setLoading(true);
navigator.geolocation.getCurrentPosition((pos) => {
    const slat: number = pos.coords.latitude;
    const slng: number = pos.coords.longitude;
	//TODO :: 구현
    setLoading(false);
}, () => {
    setLoading(false);
});

현재 위치를 수신하기 전에 loading state를 true로 변경한 후 작업이 정상으로 완료되거나, 실패로 완료되어도 loading state는 false로 변경합니다. 이제 마지막으로 UI Rendering code를 return 하는 부분에 state에 변경에 따라 Loading Component를 표시하거나 제거하는 로직을 추가합니다.

{
    loading ? <Loading /> : ''
}

위와 같이 작업하면 간단하게 Loading Dialog를 표시할 수 있습니다. 위의 예시를 사용한 화면은 아래와 같습니다.