[React] 페이지 뒤로가기 앞으로가기 구현, useHistory() 사용 방법

 

React 페이지 뒤로가기 useHistory

 

React는 최초 HTML를 받아와서 페이지를 렌더링 합니다. React-Router를 이용하면 URL 별로 다른 컴포넌트를 렌더링할 수 있게 되는데, 그 중에서도 페이지 뒤로가기는 useHistory state를 이용합니다. useHistory는  React 16.02 이상 버전에서 작동합니다.

 

useHistory() 사용방법 뒤로가기 앞으로가기 구현방법

 

React-Router 공식 문서

함수형 컴포넌트에서 state는 useState를 사용합니다. 동일한 로직으로 페이지에 관한 정보는 useHistory를 이용해서 관리할 수 있습니다. 

① useHistory를 import 합니다.

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

 

② 변수에 useHistory 함수 객체를 할당합니다.

let history = useHistory();

 

③ 뒤로가기 버튼 컴포넌트에 history 변수를 넘겨줍니다.

<Sidebar history={history} />

 

React state, props 개념이 익숙치 않다면 아래 글을 참고해주세요

React Functional Component props, state state hooks?

 

④ props를 받은 컴포넌트에서 click 이벤트를 설정해줍니다. 

props에서 전달받은 history 객체는 뒤로가기 (goBack())와 앞으로가기(goForward()) 함수를 사용할 수 있습니다. 

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleLeft, faCircleRight } from '@fortawesome/free-regular-svg-icons';

const Sidebar = (props) => {
  return (
    <section className="sidebar">
        <FontAwesomeIcon onClick={()=>{props.history.goBack();}} className='far' icon={faCircleLeft} />
        <FontAwesomeIcon onClick={()=>{props.history.goForward();}} className='far' icon={faCircleRight} />
    </section>  
  );
};