구현 방법
LoadingPage 컴포넌트에서 setTimeout() 함수와 React의 useEffect 훅을 사용하여 로딩 화면을 4초간 유지한 후 사용자를 WinnerPage로 리디렉션하도록 구현했고, useNavigate 훅을 사용하여 페이지 이동을 처리했다.
구현한 코드
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import LoadingImage from '../assets/drumming.gif';
const LoadingPage = () => {
const navigate = useNavigate();
useEffect(() => {
const timer = setTimeout(() => {
navigate('/winner'); // 4초 후 WinnerPage로 이동
}, 4000);
return () => clearTimeout(timer); // 컴포넌트 언마운트 시 타이머 클리어
}, [navigate]);
TypeScript
복사
위 코드에서 useEffect 훅은 컴포넌트가 마운트될 때 실행되며, setTimeout() 함수를 사용하여 3초 후에 navigate('/winner')를 호출한다. 이는 사용자를 WinnerPage로 리디렉션한다.
또한, useEffect의 클린업 함수에서 clearTimeout(timer)를 호출하여 컴포넌트가 언마운트될 때 타이머를 정리한다. 이는 메모리 누수를 방지하는 데 도움이 될 수 있겠다.