무쓸모톤 :: 개발일지 (2) - setTimeout 을 사용한 Intro 페이지

개발 중, 가장 먼저 처리해야할 부분이 이 setTimeout 함수 사용 부분이였다.

처음에 오랑오톡 서비스에 들어오면, 경우에 따라 두 가지로 보여줄 화면이 달라지는데

1. 이 서비스를 한 번도 사용해보지 못한 사용자
=> 깃허브 로그인 후 가이드 페이지로 이동. 가이드 완료 후 서비스 시작.

2. 이 서비스를 한 번이라도 사용해본 사용자.
=> 깃허브 로그인 후 서비스 바로 시작.

이 두 경우가 있다. 그런데 이 경우 둘 다 처음에 오랑우톡 로고가 띄워지는 화면이 2-3초간 유지된 후 다음 화면으로 넘어가야한다. 따라서 필요한 페이지는 로고가 띄워지는 인트로 페이지. 그런데 2-3초 후에 자동으로 원하는 페이지로 넘어가게 해야한다.

그래서 setTimeout 를 이용하여 구현을 해보았다.

function LogoPage() {
  // push 사용 위해 usehistory 불러오기
  const history = useHistory();
  // 2초 뒤 채팅 메인으로 넘어가는 함수 작성
  const timeout = () => {
    setTimeout(() => {
      history.push('/chatmain');
    }, 2000);
  };
  // 컴포넌트가 화면에 다 나타나면 timeout 함수 실행
  useEffect(() => {
    timeout();
    return () => {
      // clear 해줌
      clearTimeout(timeout);
    };
  });
  return (
    <LogoPageDiv>
      <Flip bottom>
        <img src={LoadingLogo} alt="Logo" width={200} height={200} />
      </Flip>
    </LogoPageDiv>
  );
}

1. timeout 이라는 함수를 먼저 정의했다. 이 함수는 setTimeout 을 실행하는데, 2초 후에 history.push 를 통해 chatmain 페이지로 넘어가게 하는 함수이다.

2. useEffect 를 사용하여 이 컴포넌트가 다 렌더링 되면 timeout 함수를 실행하고,

3. 훅이 다 끝나면 clear 해준다.

<구현한 오랑우톡 서비스 실행시 보여질 첫 화면>

다음에는 오랑이로 로딩, 에러같은 기본 컴포넌트들을 따로 만들어보려고 한다.

어째 무쓸모톤인데 점점 정성을 다해가는 것 같아 약간 열받는다.

오랑우톡 파이팅 !