리액트 라우터(React Router) 부가기능 활용

이전 블로그의 리액트 라우터 사용법 예제를 이어서 부가기능에 대해 설명하고자 합니다.

1. useNavigate

Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 상황에서 사용하는 Hook 입니다.

Layout 컴포넌트를 아래와 같이 수정합니다.

import { Outlet, useNavigate } from 'react-router-dom';

const Layout = () => {
  const navigate = useNavigate();

  const goBack = () => {
    // 이전 페이지로 이동
    navigate(-1);
  };

  const goArticles = () => {
    // articles 경로로 이동
    navigate('/articles');
  };

  return (
    <div>
      <header style={{ background: 'lightgray', padding: 16, fontSize: 24 }}>
        <button onClick={goBack}>뒤로가기</button>
        <button onClick={goArticles}>게시글 목록</button>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;

헤더에 버튼이 2개 나타 납니다.

navigate 함수를 사용할 때 파라미터가 숫자 타입이면 앞으로 가거나, 뒤로 갑니다. 예를 들어 navigate(-1) 이면 뒤로 한 번 가고, navigate(-2) 이면 뒤로 두 번 갑니다. 반대로 navigate(1) 이면 앞으로 한 번 가는데 이것은 뒤로가기를 한번 한 상태여야 합니다.

다른 페이지로 이동할 때 replace 라는 옵션을 사용하면 현재 페이지를 페이지 기록에 남기지 않습니다.

goArticles 함수를 아래와 같이 수정합니다.

  const goArticles = () => {
    // articles 경로로 이동
    navigate('/articles', {replace: true});
  };

replace가 true 인 경우 게시글 페이지는 뒤로가기 버튼을 눌렀을 때 그 이전 페이지로 넘어 갑니다.

 

2. NavLink

링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트입니다.

이 컴포넌트의 style과 className은 {isActive: boolean} 을 파라미터로 전달받는 함수 타입의 값을 전달합니다.

예시로 Articles 컴포넌트에서 사용해봅니다.

import { NavLink, Outlet } from 'react-router-dom';

const Articles = () => {
  const activeStyle = {
    color: 'green',
    fontSize: 21,
  };

  return (
    <div>
      <Outlet />
      <ul>
        <li>
          <NavLink
            to="/articles/1"
            style={({ isActive }) => (isActive ? activeStyle : undefined)}
          >
            게시글 1
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/articles/2"
            style={({ isActive }) => (isActive ? activeStyle : undefined)}
          >
            게시글 2
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/articles/3"
            style={({ isActive }) => (isActive ? activeStyle : undefined)}
          >
            게시글 3
          </NavLink>
        </li>
      </ul>
    </div>
  );
};

export default Articles;

선택한 게시글의 링크 색상과 크기가 변하는 것을 확인할 수 있습니다.

추가로 이와 같이 반복되는 코드를 간편한게 리팩토링 해봅니다.

import { NavLink, Outlet } from 'react-router-dom';

const Articles = () => {
  return (
    <div>
      <Outlet />
      <ul>
        <ArticleItem id={1} />
        <ArticleItem id={2} />
        <ArticleItem id={3} />
      </ul>
    </div>
  );
};

const ArticleItem = ({ id }) => {
  const activeStyle = {
    color: 'green',
    fontSize: 21,
  };
  return (
    <li>
      <NavLink
        to={`/articles/${id}`}
        style={({ isActive }) => (isActive ? activeStyle : undefined)}
      >
        게시글 {id}
      </NavLink>
    </li>
  );
};

export default Articles;

3. NotFound 페이지 만들기

사전에 정의되지 않는 경로에 사용자가 진입했을 때 보여주는 페이지로 페이지를 찾을 수 없을 때 나타나는 페이지를 만들어 봅니다.

pages 디렉토리에 NotFount.js 컴포넌트를 만듭니다.

const NotFound = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 64,
        position: 'absolute',
        width: '100%',
        height: '100%',
      }}
    >
      404
    </div>
  );
};

export default NotFound;

App.js 에 NotFound 페이지를 추가합니다.

import NotFound from './pages/NotFound';
import './App.css';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/profiles/:username" element={<Profile />} />
        </Route>
        <Route path="/articles" element={<Articles />}>
          <Route path=":id" element={<Article />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

<Route path="*" element={<NotFound/>} /> 로 라우트 경로에 " * " 를 넣으면 앞의 Route에 정의하지 않는 경로로 들어올 경우 NofFound 페이지를 보여준다.

4. Navigate 컴포넌트

컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동을 하고 싶을 때 사용하는 컴포넌트입니다.

즉, 페이지를 리다이렉트하고 싶을 때 사용합니다.

예를 들어 사용자의 로그인이 필요한 페이지 인데 로그인을 안 했다면 계속 로그인 페이지를 보여줘야 하는 경우를 들 수 있습니다.

pages 디렉토리에 Login.js 와 MyPage.js 를 만듭니다.

const Login = () => {
  return <div>로그인 페이지</div>;
};

export default Login;

import { Navigate } from 'react-router-dom';

const MyPage = () => {
  const isLoggedIn = false;

  if (!isLoggedIn) {
    return <Navigate to="/login" replace={true} />;
  }
  return <div>마이 페이지</div>;
};

export default MyPage;

isLoggedIn 이 고정값으로 false 를 가지고 있지만 로그인 상태에 따라 true 또는 false를 가진다고 가정한다면,

지금과 같이 false인 상태에서는 mypage로 들어가면 바로 login 페이지로 이동합니다.

replace props을 true 로 가져가면  이전페이지로 갈 때 두 페이지 전으로 이동합니다.

브라우저 주소창에 /mypage 를 입력하면 바로 /login 페이지로 이동되는 것을 확인할 수 있습니다.