React - useHistory 사용법

1. useHistory란?

useHistory는 리액트에서 URL주소를 변경할 때 사용하는 Hook이다.

예를 들어, 로그인 버튼 또는 여러 목록 중에서 하나를 선택하여 클릭했을 때, URL주소를 변경시켜 URL주소와 일치하는 Route의 컴포넌트를 렌더링하기 위해 사용한다. 리액트 특성상, URL변경없이 내부 컴포넌트만 변경시켜 화면을 바꿔줄 수 있다. 하지만 URL을 바꿔주면 현재 어느 페이지에 있는지 대략적으로 알 수 있고, 검색 쿼리가 추가된 URL을 공유할 때, 사용자가 페이지의 초기 단계부터 검색 쿼리를 추가할 때 까지 직접 하는 것이 아니라 URL주소만으로 페이지에서 결과값을 볼 수 있다. URL주소 변경없이 컴포넌트의 변경만으로 사용자가 웹 페이지를 이용할수 있지만, 복잡한 순서와 사용자 경험을 개선하기 위해 핵심 컴포넌트들이 변경될 때, URL주소를 같이 변경시켜주면 사용자 친화적인 페이지가 될 수 있다.

 

2. 관련 라이브러리 설치

npm install react react-router react-router-dom
yarn add react react-router react-router-dom

useHistory를 사용하기 위해서는 react-router-dom 라이브러리를 설치해야 한다. useHistory Hook은 react-router 5버전까지 사용할 수 있다. 최근에 나온 6버전에서는 useNavigate로 변경되었다.

 

3. 간략한 사용법

import React from 'react';
import { useHistory } from 'react-router-dom'; // 설치한 패키지

const MainComponent = () => {
  const history = useHistory();
  /*
    기존 바닐라 자바스크립트에서 사용했던 history와 이질감이 없도록 하기 위해?(개인적인 생각)
    history 변수에 추가
  */
  
  function handleUseHistory() {
    history.push('/test'); // /test로 url 이동
  }
  
  return (
    <>
      <h1>useHistory Test</h1>
      <button onClick={ handleUseHistory }>Click</button>
      {/* 버튼 클릭시, handleUseHistory 함수 실행 */}
    </>
  )
}

export default MainComponent;

버튼을 클릭했을 때, 함수가 실행되어 url이 바뀌도록 구현하였다. 

 

추가적으로 useHistory에서 가장 많이 사용하는 메서드로는 go, back, replace가 있다.

• go : 해당 URL을 추가한다. (Stack의 개념이기에 하나씩, 차곡차곡 쌓인다.)
• back : 현재 URL 이전으로 변경한다.
• replace : URL을 추가하는 것이 아니라 현재 URL을 변경한다.

 

• back 사용법

function handleUseHitory() {
  history.back(); // 이전 URL로 변경한다.
}

• replace사용법

function handleUseHistory() {
  history.replace('/something'); // 현재 URL을 something으로 변경한다.
}

 

4. URL에 따라 컴포넌트 변경법

URL에 따라 컴포넌트를 달리 보여주려면, App.js에서 Route 설정을 다르게 해준면 된다.

// App.js

const App = () => {

  return (
    <Switch>
      <Route path="/" exact component={ MainComponent } />
      <Route path="/test" component={ TestComponent } />
      <Route path="/something" component={ SomethingComponent } />
    </Switch>
  );
}

export default App;

Route path의 일치 여부에 따라 보여주는 컴포넌트를 달리할 수 있다.

 

---

URL을 변경시켰을 때의 장점

https://ui.toast.com/weekly-pick/ko_20211214

React UI 상태를 URL에 저장해야 하는 방법과 이유

 

react-router5와 react-router6의 변경점

https://reactrouter.com/docs/en/v6/upgrading/v5

React Router | Upgrading from v5

 

useHistory 메서드 목록

https://v5.reactrouter.com/web/api/history

Declarative routing for React apps at any scale | React Router