[React] React에서 setTimeout 매서드로 스플래쉬(Splash) 구현하기

기업협업중이다 😂

 

React Native로 모바일 앱을 많이 구현하지만

 

아직 RN은 미숙하기때문에.. 

 

React.js 로 Splash 구현을 해 보았다.

 

 

 

 

 

현재 프로젝트에서는 앱으로 들어가면 바로 login -> home 으로 갈 수 있게 구현해야 했다. 

 

그래서 splash는 login.jsx에 구현하였다. 

 

 

 

 

 

1. HomeSplash.jsx 만들기

import React from 'react';
import * as S from './HomeSplash.style';

const HomeSplash = () => {
  return (
    <S.HomeSplashContainer>
      <S.Logo src="./images/logo.png" />
    </S.HomeSplashContainer>
  );
};
export default HomeSplash;

 

 

 

 

 

2. Splash 넣을 컴포넌트 가서 추가해주기

import HomeSplash from '../Home/HomeComponents/HomeSplash';

const Login = () => {

const [showSplash, setShowSplash] = useState(true);

 useEffect(() => {
    setTimeout(() => {
      setShowSplash(false);
    }, 2000);
  }, []);
  
  //useEffect로 2초 후에 setShowSplash(false) 함수를 호출해서 showSplash를 true->false로 변경한다. 
  
  
  return (
    <>
      {showSplash && <HomeSplash />}
      {!showSplash && ( 로그인 로직) }
      </>
      )
     }

 

여기서 사용한 React Hook 은 useState, useEffect 였다. 

 

Login 화면에서 2초동안 화면을 가리는 HomeSplash.jsx 컴포넌트를 보여주고, 이후에 로그인 화면을 보여주는 코드이다.

 

 

 

 

 

---

📌 setTimeout 매서드

 

setTimeout() 매서드는 완료된 후 함수나 지정한 코드를 실행하는 타이머를 설정하는 매서드이다.

시간 단위는 밀리초 단위로,  생략하거나 0을 지정할 경우 '즉시' 발동된다.

 

만약에 어떤 함수를 밀리초마다 반복적으로 호출해야하는 경우가 있으면 setInterval() 을 사용하면 된다!

 

나는 2초동안만 보여줄 splash를 구현하고자 useEffect에 setTimeout( ) 을 넣어  한번만 실행되게 했다 : )