[React] useHistory() 사용하여 페이지 뒤로가기

useHistory란?

useHistory를 사용하면, 페이지 방문 기록을 쉽게 관리할 수 있으며 여러가지 내장 함수를 사용해 뒤로가기, 특정 페이지로 이동하기 등을 구현할 수 있습니다.  이 hook을 사용하려면 리액트 16.8 버전 이상이어야 합니다.

 

1. goBack() 사용하여 뒤로가기

useHistory 내장 함수인 goBack을 사용하면 뒤로가기를 쉽게 구현할 수 있습니다.

1) useHistory를 import

import React from 'react'
// 요기
import { useHistory } from 'react-router-dom';

function Login() {
  return (
    <div>
      <div>로그인 페이지입니다.</div>
      <button>로그인</button>
      <button>뒤로가기</button>
    </div>
  )
}

export default Login

 

2) 변수를 하나 생성해서 useHistory 함수 저장

이제 history라는 변수에 페이지 방문 기록과 여러가지 함수가 오브젝트 자료형으로 담기게 됩니다.

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

function Login() {
  // 요기
  let history = useHistory();

  return (
    <div>
      <div>로그인 페이지입니다.</div>
      <button>로그인</button>
      <button>뒤로가기</button>
    </div>
  )
}

export default Login

 

3) goBack 함수 적용

history에 goBack() 함수라는 게 존재하는 데 그 함수를 뒤로가기 버튼에 적용합니다.

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

function Login() {
  let history = useHistory();

  return (
    <div>
      <div>로그인 페이지입니다.</div>
      <button>로그인</button>
      <button onClick={ () => {
          history.goBack();
        } } >뒤로가기</button>
    </div>
  )
}

export default Login

 

2. push() 사용하여 특정 페이지로 이동하기

버튼을 클릭했을 때, 단순히 '뒤로가기'가 아닌 특정 페이지로 가고 싶다면 useHistory 내장 함수인 push를 사용하면 됩니다.

1) push 함수 안에 원하는 경로를 입력한다.

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

function Login() {
  let history = useHistory();

  return (
    <div>
      <div>로그인 페이지입니다.</div>
      <button>로그인</button>
      <button onClick={ () => {
          history.push('/');
        } } >뒤로가기</button>
    </div>
  )
}

export default Login

 

출처 : https://velog.io/@nemo/React-useHistory-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0