History

홈페이지를 뒤로 가기 하거나 뒤로 간 상태에서 앞으로 가기 등을 할 수 있는 이유는 히스토리가 남아있기 때문임

goBack()을 하면 뒤로가고 goForward()를 하면 앞으로, push()를 하면 정해진 url로 갈 수 있게 됨

Link로 어떤 url을 호출하게 되면, 해당 url로 이동시 렌더링 된 component에는 아무런 파라미터를 주지 않아도 저절로 넘겨지는 것들이 있음

history, match, location임
history는 위에 적었으니 생략하고 match는 파라미터를 읽어들이고, location은 쿼리스트링을 읽어들일 때 사용

import React, { useEffect } from 'react';

function HistorySample({ history }) {
  const goBack = () => {
    history.goBack();
  };

  const goHome = () => {
    history.push('/');
  };

  useEffect(() => {
    console.log(history);
    const unblock = history.block('정말 떠나실건가요?');
    return () => {
      unblock();
    };
  }, [history]);

  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <button onClick={goHome}>홈으로</button>
    </div>
  );
}

export default HistorySample;

따라서 단순히 위와 같은 코드를 적기만 해도,
뒤로가기 버튼을 누르면 이전 페이지로 가지고,
홈으로 버튼을 누르면 /즉, /home으로 이동함

당연히, 이를 위해서는 <Link to="/history" component={History}/>가 App.js든 어디든 선언되어 있어야 함

useEffect안 에서의 history.block은 자바스크립트의 confirm()과 비슷함. 다른 홈페이지로 이동할 경우에 뜨도록, 즉 component가 unmount되려할 때 뜨고 확인을 누르면, 다른 페이지로 이동하지만 취소를 누르면 이동하지 않음