setTimeout으로 일정 시간 뒤에 화면 전환하기

Splash Screen

Splash Screen(스플래쉬 스크린)이란 일반적으로 애플리케이션 실행 시 페이지의 컨텐츠가 로딩되기까지 일시적으로 보여주는 화면을 말한다.

이를 구현하기 위해 몇 초간 화면을 띄워놨다가 특정 화면으로 이동하는 효과를 주기 위해 몇 초 뒤에 실행되는 화면 이동 코드를 구현해야 했다.

그래서 찾아낸 것이 "setTimeout" 이다.

화면 전환 시나리오

스플래쉬 스크린에서 브라우저가 사용자의 정보를 가지고 있지 않으면 로그인 화면으로, 아니면 메인 화면으로 이동해야 한다. 그에 대한 코드이다.

// SplashScreen.js
import {useEffect} from "react";

import InitialBackground from "../../components/styledComponent/InitialBackground";
import Text from "../../components/styledComponent/Text";

const SplashScreen = ({rootNavigateTo}) => {
    
    useEffect(() => {

        const redirectScreen = () => {
            window.localStorage.getItem('userId') ? rootNavigateTo('RecordScreen') : rootNavigateTo('LoginScreen');
        };

        const timeoutId = setTimeout(redirectScreen, 1000);

        return () => clearTimeout(timeoutId);
    },[])
    
    return (
        <InitialBackground>
            <img src="img/icon.png" style={{width : '20vh', height:'20vh', position:'relative', bottom: 150}} />
            <Text style={{fontSize: '5vh', marginBottom: 20}}>VDC</Text>
            <Text>Voice Data Collector</Text>
        </InitialBackground>
    )
}

export default SplashScreen;

위의 코드에서

setTimeout(redirectScreen, 1000) 

이 코드를 보면 1000 밀리초 (1초) 뒤, redirectScreen 함수가 실행된다는 것을 알 수 있다. 1초 뒤, 조건에 따라 화면이 전환되는 동작을 볼 수 있었다.