Navigation

학습 키워드

• History

  • History.pushState

• Link

• NavLink

• Navigate

• useNavigate

History

History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.

History.pushState

HTML 문서에서, history.pushState() 메서드는 브라우저의 세션 기록 스택에 항목을 추가합니다.

const state = {};  // 브라우저 이동 시 넘겨줄 데이터 (popstate 에서 받아서 원하는 처리를 해줄 수 있음)
const title = '';  // 변경할 브라우저 제목 (변경 원치 않으면 null)
const url = '/경로';  // 변경할 주소

history.pushState(state, title, url);

React 에서 페이지 전환할때 사용하는 react-router 는 history.push 를 통해 마치 SSR 처럼 브라우저 주소를 바꿔주고 동시에 Root 엘리먼트의 내용물도 바꿔준다. 이걸 순수 JS 로 구현하고자 한다면 history.pushState 를 사용하면 된다.

History.pushState 는 페이지 이동 없이 주소만 바꿔준다. (브라우저의 뒤로가가 버튼이 활성화 된다.) 브라우저 페이지를 이동하게 되면 window.onpopstate 라는 이벤트가 발생하게 되는데, pushState 를 했을때는 popstate 이벤트가 발생하지않고, 뒤 / 앞으로 가기를 클릭 했을때 popstate 이벤트가 발생하게 된다. 즉, pushState 와 popstate 둘을 이용하여 SPA 의 페이지 전환을 구현할 수 있다.

🤔 React에서는 <a> 태그를 사용하지 않는다?

왜냐면 <a>를 사용하여 페이지 이동하게 되면 페이지 전체를 다시 렌더링 하기 때문이다.

그래서 React Router 는 Link 특정 주소로 이동해주는 기능을 , Navigation 특정 행동을 했을 때 해당 주소로 이동 할 수 있는 기능을 제공해준다.

Link

<Link to="/경로"> ..... </Link>

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

export default function Header() {
  return (
    <header>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </header>
  );
}

NavLink

<NavLink to="/경로"> ..... </NavLink>

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

export default function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
      </ul>
    </header>
  );
}

🤔 Link 와 NavLink 의 차이점

By default, an active class is added to a <NavLink> component when it is active so you can use CSS to style it.

It provides useful context for assistive technology like screen readers

활성화된 페이지에 기본적으로 active class를 제공해준다. aria-current 또한 지원해준다.

Link 와 NavLink 의 차이점

Navigate

• 어떤 작업을 수행하고 리다이렉션을 발생시킬 때 사용 (Ex.Logout)

📖 Redirect 사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 의미한다. 예를들어, 웹사이트 A의 주소로 접속한 사용자를 웹사이트 B로 이동시키는 것을 말한다.

<Navigate to="/경로" />

// LogoutPage.tsx

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

export default function LogoutPage() {
  return <Navigate to="/" />;
}

🚨 Redirect을 하는 LogoutPage 테스트 결과 Error 발생

// routes.test.tsx

context('when the current path is “/logout”', () => {
  it('redirects to the home page', () => {
    renderRouter('/logout');

    screen.getByText(/환영/);
  });
});

ReferenceError: Request is not defined MSW 배울 때 사용했던 폴리필 whatwg-fetch import 해서 사용하자. → 정확한 이유는... 아직 이해되지 않았다. 특수한 상황이라고 한다.

useNavigate

• 어떤 작업을 수행하고 리다이렉션을 발생시킬 때 사용 (Ex.Logout)

• Hook을 이용해 redirect을 편리하게 처리

Navigate 보다 useNavigate 더 많이 사용한다. by. 코딩의신 야살

const navigate = useNavigate();

navigate('/');

useNavigate 의 인자

const navigate = useNavigate();

navigate('경로', {replace, state });

📌 replace

const navigate = useNavigate();

navigate('경로', {replace : true });

• true : navigate에 적힌 주소로 이동한 후 뒤로가기 를 방지하는 옵션

• false : navigate에 적힌 주소로 이동한 후 뒤로가기 를 가능하게 하는 옵션 (Default)

📌 state

const navigate = useNavigate();

navigate('경로', {state : {....props} });

• navigate에 적힌 주소로 이동한 후 state 전달 해 줄 수 있다.

• 전달 받은 state는 useLocation Hook을 이용해 사용 할 수 있다.

🔗 참고

• history.pushState ( 화면 전환 )
• 리다이렉트(Redirect)
• react 에서 navigate 사용하기 (useNavigate / Navigate)
• useNavigate로 state 넘기기