Navigation

Navigation이란?

웹 애플리케이션 내에서 사용자가 메뉴, 링크, 버튼을 통해 다른 화면이나 다른 페이지로 이동하는 기능을 의미

React Router는 History API를 내부적으로 사용하여 Navigation을 처리하는 다양한 컴포넌트, 훅을 제공한다.

Link

사용자가 클릭하여 다른 화면으로 이동할수 있게 해주는 컴포넌트 결과적으로 a 요소가 렌더링 된다.

declare function Link(props: LinkProps): React.ReactElement;

interface LinkProps
  extends Omit<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "href"
  > {
  replace?: boolean;
  state?: any;
  to: To;
  reloadDocument?: boolean;
  preventScrollReset?: boolean;
  relative?: "route" | "path";
}

type To = string | Partial<Path>;

interface Path {
  pathname: string;
  search: string;
  hash: string;
}

• replace → 브라우저 히스토리 스택에 추가하지 않고 대체한다. (뒤로가기 시 건너뜀)

• state → 브라우저 히스토리 스택에 데이터(state)를 추가한다. 이전 페이지에 전달된 데이터를 사용 가능

• to(절대경로) → 이동할 경로를 작성, 객체로 작성시, 경로명, 쿼리, 해쉬 값을 따로 지정

• reloadDocument → 값이 true이면 이동할 때 브라우저가 새 HTML을 받아오도록 강제

• preventScrollReset → 값이 true이면, 이동 후 스크롤 위치를 유지한다. (Link 클릭 한정)

  • <ScrollRestoration> 컴포넌트를 이용하면 전역적으로 페이지 이동시 스크롤 유지가 가능하다.

• relative → to 값의 경로 기준을 상대경로로 변경한다.

  • route → 현재 라우트 경로를 기준으로 상대 경로 지정

  • path → 현재 페이지의 URL 경로를 기준으로 상대 경로 지정

  • 절대경로 처럼 적으면 /sample 그냥 절대경로처럼 작용한다. 반드시 ./ 와 같이 상대경로로 작성해야함

route vs path

• dynamic segments를 사용하는 경우 차이가 나타난다.

• 현재 경로가 '/product/:id', 즉 '/product/1234'라고 한다면

• <LInk to='/comment' relative='route'> 인 경우 '/product/1234/comment' 로 이동된다.

• <LInk to='/comment' relative='path'> 인 경우 '/product/comment' 로 이동된다.

NavLink

<Link /> 컴포넌트에서 active, pending 여부 기능이 추가된 버전,

active

• 현재 경로와 <NavLink to={경로} />가 일치 한다면 active 속성이 활성화 된다.

• active 속성이 활성화되면 .active 클래스와 aria-current="page" 속성이 할당된다.

pending

• 링크를 클릭 후 페이지 전환이 완료되기 전까지 pending 속성이 활성화 된다.

• 즉, 로딩중임을 나타내는 속성

end

• 경로가 정확히 일치하는 경우에만 active를 활성화 시킨다.

• 즉, 동적 세그먼트 및 하위 라우트 페이지에서는 active 가 비활성화된다.

Navigate

Redirect용 컴포넌트이며, 해당 컴포넌트가 렌더링 될 때 페이지를 이동시킨다.

조건부 렌더링 상황에서, 특정 조건이 충족되었을 때 리다이렉트를 해야 하는 경우 자주 사용된다.

declare function Navigate(props: NavigateProps): null;

interface NavigateProps {
  to: To;
  replace?: boolean;
  state?: any;
  relative?: RelativeRoutingType;
}

Usage

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

const PublicRoute = () => {
  const { user, initializing } = useAuth();

  if (initializing) return null;

  return user ? (
    <Navigate to='/' />
  ) : (
    <PublicLayout>
      <Outlet />
    </PublicLayout>
  );
};

useNavigate

프로그래밍 방식으로 페이지를 이동할 수 있는 함수를 반환하는 훅

interface NavigateFunction {
  (
    to: To,
    options?: {
      replace?: boolean;
      state?: any;
      relative?: RelativeRoutingType;
    }
  ): void;
  (delta: number): void;
}

• delta → 브라우저 히스토리 스택 기준으로 현재 위치에서 이동할 위치의 변화량 (-1 이면 뒤로가기)

Usage

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

export default function App() {
  const navigate = useNavigate();
  
  const handleRedirectHome = () => {
    navigate('/');
  }
  
  const handlePreviousPage = () => {
    navigate(-1);
  }
  
  return (
  <div>
    <button type="button" onClick={handleRedirectHome}>Redirect Home</button>
    <button type="button" onClick={handlePreviousPage}>Go Previous Page</button>
  </div>)
}

번외 useLocation

React Router의 현재 위치 정보를 제공하는 객체를 반환하는 훅

declare function useLocation(): Location;

interface Location extends Path {
  state: unknown;
  key: Key;
}

• state → 라우터간 정보를 전달하고 공유하는 데이터, 이동할 다음 페이지에 전달하거나, 이전 페이지에서 전달한 데이터를 받아올 수 있다.

• key → 라우터의 위치 정보를 관리하기 위해 사용되는 고유 식별자, React Router가 위치를 업데이트할 때 사용

window.location과 차이가 뭘까?

window.location은 브라우저의 현재 URL 정보를 갖는 객체이며, 전역적으로 접근이 가능하지만 브라우저 환경에서만 접근할 수 있다.

또한 useLocation이 반환하는 객체와 달리 state 데이터를 갖고 있지 않다.

state 활용

주문 완료 페이지처럼 일회성 페이지에 데이터(주문 품목)를 전달할 때 사용하면 요긴할 것 같다.?

이전에는 쿼리스트링으로 넘겨서 받는 형식으로 사용했지만 새로고침해서 유지할 필요가 전혀 없었기에 해당 방식을 사용하면 좀 더 깔끔한 코드를 짤 수 있을 것 같다.

⚠️ state는 라우트 이동간 공유되는 데이터이므로 새로고침하면 날라간다. 즉, 외부 링크로 접속시 state는 비어있으므로 적절한 상황에서 사용하자.