페이지 이동 방법: `useHistory`, `useNavigate`, `window.location` 비교

Hyun Jin·2024년 10월 25일

페이지 이동과 관련한 `useHistory`, `useNavigate`, `window.location` 비교

React 애플리케이션에서 페이지 이동은 중요한 기능 중 하나입니다. 이를 구현하기 위해 React Router에서 제공하는 useHistory, useNavigate 훅과 JavaScript의 window.location 객체를 사용할 수 있습니다. 이번 포스트에서는 각각의 기능과 차이를 비교하고, 어떤 상황에서 어떤 방법을 사용하는 것이 좋은지 살펴보겠습니다.

1. `useHistory` (React Router v5)

useHistory는 React Router v5에서 제공하는 훅으로, 브라우저의 히스토리와 상호작용할 수 있게 해줍니다. 이를 통해 페이지를 프로그램적으로 이동하거나, 뒤로 가기, 앞으로 가기 등의 기능을 쉽게 구현할 수 있습니다.

주요 기능:

push(path): 새로운 경로로 이동하고, 해당 경로를 히스토리에 추가합니다.
replace(path): 현재 경로를 대체하여 이동합니다. 이 경우, 이전 페이지로 돌아갈 수 없습니다.
go(n): 히스토리 스택에서 n 단계로 이동합니다. n 값이 양수면 앞으로, 음수면 뒤로 이동합니다.
goBack(): 히스토리에서 한 단계 뒤로 이동합니다.
goForward(): 히스토리에서 한 단계 앞으로 이동합니다.

사용 방법:

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

function MyComponent() {
  const history = useHistory();

  const goToPage = () => {
    history.push('/new-page'); // 페이지 이동
  };

  return <button onClick={goToPage}>Go to New Page</button>;
}

사용 시기:

React Router v5를 사용하는 프로젝트에서 페이지 이동 시 사용합니다.
특정 경로로 이동하거나, 뒤로가기/앞으로 가기 기능을 추가할 때 유용합니다.
로그인 후 대시보드로 이동하거나, 쇼핑몰에서 제품 선택 후 결제 페이지로 이동할 때 사용됩니다.

2. `useNavigate` (React Router v6)

useNavigate는 React Router v6에서 도입된 최신 네비게이션 훅으로, useHistory의 역할을 대체합니다. 더욱 간결한 API와 다양한 네비게이션 기능을 제공합니다.

주요 기능:

navigate(path): 특정 경로로 이동합니다.
navigate(path, { replace: true }): 현재 경로를 대체하며 이동합니다. 이 경우, 이전 페이지로 돌아갈 수 없습니다.
navigate(-1): 히스토리 스택에서 한 단계 뒤로 이동합니다.
navigate(path, { state: { key: value } }): 페이지 이동 시 상태를 함께 전달할 수 있습니다.

사용 방법:

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

function MyComponent() {
  const navigate = useNavigate();

  const goToPage = () => {
    navigate('/new-page');  // 페이지 이동
  };

  return <button onClick={goToPage}>Go to New Page</button>;
}

사용 시기:

React Router v6를 사용하는 프로젝트에서 페이지 이동 시 사용합니다.
상태와 함께 이동이 필요한 경우, 예를 들어 데이터를 전송하면서 다른 페이지로 이동할 때 유용합니다.
페이지를 대체하거나 조건부로 이동할 때도 효과적입니다.

장점:

최신 방식으로 코드가 더 간결하고 직관적입니다.
상태 전달이 가능하여, 네비게이션을 더 쉽게 관리할 수 있습니다.
브라우저 히스토리 스택에 경로를 추가하거나 대체하며, 조건에 따라 동적 네비게이션을 구현할 수 있습니다.

3. `window.location` 객체

window.location은 JavaScript 표준 객체로, URL 변경, 새로 고침 등의 기능을 제공합니다. React Router에 의존하지 않으며, 브라우저 내장 메서드를 사용해 페이지를 이동합니다.

주요 기능:

window.location.href: URL을 변경하여 새로운 페이지로 이동합니다. 이 경우 페이지가 완전히 새로 로드됩니다.
window.location.replace(url): 현재 페이지를 지정된 URL로 교체하며 이동합니다. 히스토리에 기록되지 않기 때문에 뒤로가기를 사용할 수 없습니다.
window.location.reload(): 현재 페이지를 새로 고칩니다.

사용 방법:

function goToPage() {
  window.location.href = 'https://www.example.com';  // 페이지 이동
}

사용 시기:

외부 페이지로 이동할 때 사용합니다. React Router가 아닌 웹 브라우저에서 페이지를 새로 로드하는 방식으로 이동할 필요가 있을 때 적합합니다.
SPA가 아닌 프로젝트에서 URL을 변경해 페이지를 이동할 때.
전체 새로고침이 필요한 상황에서 유용합니다.

장점:

외부 링크나 사이트로 이동할 때 간단하게 사용할 수 있습니다.
브라우저에 의존적이므로, React Router 없이도 동작합니다.

단점:

SPA(Single Page Application)에서는 비효율적입니다. 페이지가 완전히 새로 로드되기 때문에 사용자 경험이 떨어질 수 있습니다.
상태를 함께 전송하는 기능이 없으며, 이동할 때마다 리소스 재로드가 필요합니다.

비교 요약

기능	`useHistory` (v5)	`useNavigate` (v6)	`window.location`
페이지 이동	`push`, `replace`, `go`	`navigate`	`href`, `replace`
히스토리 제어	가능	가능	제한적
SPA에서의 사용	최적화됨	최적화됨	비효율적
외부 페이지 이동	어려움	어려움	용이
상태 전달	`location.state` 사용	`navigate`로 상태 전달	불가능
주 사용 시나리오	프로그램적 페이지 이동	최신 프로젝트에서 권장	외부 페이지 이동, 새로고침

결론: 언제 어떤 방법을 사용해야 할까?

React Router v6를 사용하는 경우:
useNavigate를 사용하는 것이 가장 적합합니다. 최신 API를 활용하면 코드가 간결해지고, 상태 전달과 같은 다양한 기능을 쉽게 구현할 수 있습니다. 특히, 사용자 경험을 고려할 때, useNavigate는 SPA에서의 네비게이션을 효율적으로 처리할 수 있습니다.
React Router v5를 사용하는 경우:
useHistory를 사용하는 것이 좋습니다. v5에서 제공되는 표준적인 네비게이션 방식으로, push, replace 등의 메서드를 통해 페이지 이동을 간편하게 처리할 수 있습니다. 이 경우, 기존 프로젝트에 맞춰 안정적으로 기능을 구현할 수 있습니다.
외부 페이지로 이동하거나 페이지를 새로 고침해야 하는 경우:
window.location을 사용하는 것이 적합합니다. 특히, SPA가 아닌 경우, 외부 링크로의 이동이나 전체 페이지 새로 고침이 필요할 때 이 방법이 유용합니다. 단, 이 경우 사용자 경험이 저하될 수 있으니, 필요한 상황에서만 사용하는 것이 좋습니다.

최종 추천

프로젝트의 필요에 따라 선택: 각 방법은 상황에 따라 장단점이 다르므로, 프로젝트의 요구사항에 따라 적절한 선택을 해야 합니다.
유지보수와 확장성을 고려: 최신 기술 스택을 사용하는 것이 유지보수와 향후 확장성에 유리할 수 있습니다. 가능하다면, React Router의 최신 버전을 사용하는 것이 권장됩니다.
사용자 경험 최우선: 페이지 이동이 사용자 경험에 미치는 영향을 항상 고려하여, 최적의 방법을 선택하는 것이 중요합니다.

참고 자료

[1] velog - useHistory, useNavigate로 페이지 이동 후 값 전달 하기 (https://velog.io/@citron03/useHistory-useNavigate%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-%ED%9B%84-%EA%B0%92-%EC%A0%84%EB%8B%AC-%ED%95%98%EA%B8%B0)
[2] velog - [REACT] Link vs useNavigate vs window.location.href (https://velog.io/@msm4167/REACT-Link-vs-useNavigate-vs-window.location.href)
[3] 티스토리 - [React] useNavigate와 useLocation으로 페이지 간 데이터 전달 ... (https://mini-frontend.tistory.com/2)
[4] 티스토리 - 라우팅 관련 기능들 정리 (React Router) : useNavigate ... (https://dev-astra.tistory.com/605)

뤼튼 사용하러 가기 > https://agent.wrtn.ai/5xb91l

Hyun Jin

새싹 프론트엔드 개발자

이전 포스트

[번역] Lernign to Learn

다음 포스트

페이지 이동 방법: `useHistory`, `useNavigate`, `window.location` 비교

페이지 이동과 관련한 `useHistory`, `useNavigate`, `window.location` 비교

1. `useHistory` (React Router v5)

주요 기능:

사용 방법:

사용 시기:

2. `useNavigate` (React Router v6)

주요 기능:

사용 방법:

사용 시기:

장점:

3. `window.location` 객체

주요 기능:

사용 방법:

사용 시기:

장점:

단점:

비교 요약

결론: 언제 어떤 방법을 사용해야 할까?

최종 추천

참고 자료

[번역] Lernign to Learn

시맨틱 태그와 관련 아티클 번역

0개의 댓글

페이지 이동 방법: `useHistory`, `useNavigate`, `window.location` 비교

페이지 이동과 관련한 useHistory, useNavigate, window.location 비교

1. useHistory (React Router v5)

주요 기능:

사용 방법:

사용 시기:

2. useNavigate (React Router v6)

주요 기능:

사용 방법:

사용 시기:

장점:

3. window.location 객체

주요 기능:

사용 방법:

사용 시기:

장점:

단점:

비교 요약

결론: 언제 어떤 방법을 사용해야 할까?

최종 추천

참고 자료

[번역] Lernign to Learn

시맨틱 태그와 관련 아티클 번역

0개의 댓글

페이지 이동과 관련한 `useHistory`, `useNavigate`, `window.location` 비교

1. `useHistory` (React Router v5)

2. `useNavigate` (React Router v6)

3. `window.location` 객체