[React] React app - 시작 로고 페이지 만들기 (useNavigate, setTimeout())

앱 실행 시 로고 페이지가 몇 초 띄워진 후 다음 페이지로 넘어가도록 하는 시작 로고 페이지 만들기

 

useNavigate

 

useNavigate hook 은 양식을 제출한 후 navigate 할 수 있는 함수를 반환.

 

사용법

import { useNavigate } from "react-router-dom";

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

 

navigate 함수 형식

 

navigate(to, { replace, state })

첫 번째 인자 : to 는 <Link to> 에서 to=""와 같은 값. path 주소 값

두 번째 인자 : { replace : true } 이면 history stack에 새 항목이 추가되는 것이 아닌 현재 위치로 대체한다. 생략 가능

 

navigate(to, { state })

두 번째 인자로 state 필요시 사용.

 

navigate(-1) : back button

 

 

setTimeout()

javascript timing events

비동기 함수.

 

setTimeout 함수 형식

setTimeout(function, milliseconds)

 

지정된 milliseconds 만큼 기다린 후 function 실행

 

clearTimeout()

clearTimeout(timeoutVariable)

타이머 해제. setTimeout()에서 지정된 function 실행 중지

clearTimeout() method 는 setTimeout()에서 반환된 변수를 사용

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

 

function이 아직 실행되지 않았을 때에도 clearTimeout() method 를 통해 실행을 중지할 수 있다.

 

전체 코드

import React, { useEffect, useState } from 'react'
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { AttentionSeeker } from 'react-awesome-reveal';
import QRpage from './QRpage';

const LogoPageDiv = styled.div`
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
`;

function LogoPage() {
	const [loading, setLoding] = useState(true);

	const navigate = useNavigate();
	const timeout = () => {
		setTimeout(() => {
			navigate('/QRpage');
		}, 2000);
	};
	useEffect(() => {
		timeout();
		return () => {
			clearTimeout(timeout);
		};
	}); 
	return (
		<LogoPageDiv>
			<AttentionSeeker tada>
				<img alt='logo_start' src='img/logo_start.png' width={500} height={500}/>
			</AttentionSeeker>
		</LogoPageDiv>
	);
};

export default LogoPage;

timeout 함수 : 로고페이지 실행 후 2초 뒤에 navigate 함수 통해 QRpage로 이동

useEffect : 컴포넌트가 렌더링 되면 timeout 함수 실행, hook이 끝나면 clear

 

실행결과

 

 

참고 :

https://reactrouter.com/docs/en/v6/hooks/use-navigate

https://reactrouter.com/docs/en/v6/upgrading/v5

https://www.w3schools.com/js/js_timing.asp

https://developer.mozilla.org/ko/docs/Web/API/setTimeout

https://velog.io/@qhahd78/%EB%AC%B4%EC%93%B8%EB%AA%A8%ED%86%A4-%EA%B0%9C%EB%B0%9C%EC%9D%BC%EC%A7%80-2-setTimeout-%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%9C-Intro-%ED%8E%98%EC%9D%B4%EC%A7%80

https://velog.io/@soryeongk/ReactRouterDomV6

https://basemenks.tistory.com/278