2021.07.09(Fri.) <React 뒤로가기 버튼>

1. 사건의 발단

• 페이지를 만들었으면 뒤로도 가야 할 것 아닌가...! 응당 그것이 맞는 일이다.
• React Router DOM의 기능으로 주소의 기록을 알려주는 'history'기능이 있다고 한다. 그것을 이용하기로 하였다.

2. 사전 작업

• useHistory
  • useHistory를 import 한다. 이는  React Router DOM의 기능이다.

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

3. 이벤트 핸들

const history = useHistory();

  const handleHistory = () => {
    history.goBack();
  }

• useHistory를 history에 할당한다.
• handleHistory이벤트를 만들어서 안에 history의 goBack을 사용한다.
• goBack은 바로 이전의  주소 history를 읽어 보낸다.

4. 버튼 만들기

<i onClick={ handleHistory } className="far fa-arrow-alt-circle-left" />

• 이처럼 눌렀을때 이벤트가 발생할 수 있도록 만들어 주었다.
• 나는 Font Awesome의 아이콘을 사용하였다. 아이콘을 누르면 뒤로 갈 수 있도록.

리액트를 전반적으로 다시 보았다. 고차 함수를 리액트 안에서 자유롭게 사용할 수 있게 되었다. 주말 동안 state와 Hook을 더 연습하여 자유롭게 사용하게 되면 완벽할 것 같다.

 

(2022.01.03 수정!)

추가 : 이제는 useHistory 대신 useNavigate를 사용해야 합니다!

V6 부터 (약, 2021.03월 쯤 업데이트 되었다) 이제 useHistory는 이름이 useNavigate로 바뀌었다.

(라우팅을 담당하던 switch도 routes로 개명했다)

사용법은 비슷하다. 오히려 더 간단해졌다.

// history를 사용할 때
const history = useHistory();

history.push('/maps')
history.replace('/maps')

// navigate를 사용할 때
const navigate = useNavigate();

navigate('/maps');
navigate('/maps', {replace: true});

// 이전 페이지로 이동
navigate(-1)

// 앞 페이지로 이동
navigate(1)