리액트 라우터는 싱글 페이지 애플리케이션에서 페이지의 라우팅을 처리하기 위한 인기 있는 라이브러리입니다. 그러나 라우팅된 페이지로 이동하기 전에 스플래시 페이지를 표시하고 싶은 경우 어떻게 해야 할까요?
이번 포스트에서는 리액트 라우터를 사용하여 라우팅된 페이지로 이동하기 전에 스플래시 페이지를 효과적으로 처리하는 방법에 대해 알아보겠습니다.
1. 리액트 라우터 설치하기
먼저, 리액트 라우터를 설치해야 합니다. npm을 사용하여 아래 명령어를 실행합니다.
npm install react-router-dom
2. 스플래시 페이지 컴포넌트 생성하기
다음으로, 스플래시 페이지를 나타내는 컴포넌트를 생성해야 합니다. 이 컴포넌트는 일시적으로 표시되고, 라우팅된 페이지로 이동됩니다.
import React from 'react';
const SplashPage = () => {
return (
<div>
<h1>Loading...</h1>
{/* 스플래시 페이지에 대한 디자인 작업 */}
</div>
);
};
export default SplashPage;
3. 라우터 설정하기
라우터 설정 파일에서 스플래시 페이지 컴포넌트를 사용하도록 설정해야 합니다. 이를 위해 react-router-dom 패키지의 BrowserRouter와 Route를 사용합니다.
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SplashPage from './SplashPage';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
const App = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={SplashPage} />
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
</Switch>
</BrowserRouter>
);
};
export default App;
위의 코드에서, exact 키워드는 정확히 주어진 경로에만 매치되도록 설정합니다. 즉, 스플래시 페이지는 “/” 경로에만 매치됩니다.
4. 스플래시 페이지 표시 시간 설정하기
스플래시 페이지를 일시적으로 표시하기 위해, setTimeout 함수를 사용하여 일정 시간 후에 라우팅된 페이지로 이동하도록 구현할 수 있습니다.
import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const SplashPage = () => {
const history = useHistory();
useEffect(() => {
const timer = setTimeout(() => {
history.push('/home'); // 일정 시간 후에 홈 페이지로 이동
}, 3000); // 3초 후에 이동
return () => {
clearTimeout(timer); // 컴포넌트가 언마운트되면 타이머 제거
};
}, [history]);
return (
<div>
<h1>Loading...</h1>
{/* 스플래시 페이지에 대한 디자인 작업 */}
</div>
);
};
export default SplashPage;
위의 코드에서, useEffect 훅을 사용하여 컴포넌트가 렌더링될 때마다 타이머를 설정하고, 컴포넌트가 언마운트될 때 타이머를 해제합니다.
이제 리액트 라우터를 사용하여 라우팅된 페이지로 이동하기 전에 스플래시 페이지를 효과적으로 처리할 수 있습니다. 이를 통해 사용자에게 로딩 상태를 시각적으로 표시할 수 있고, 원활한 사용자 경험을 제공할 수 있습니다.