[React]함수형 컴포넌트에서의 this.props.history.push();

MEGAFOX 프로젝트 리팩토링

class 컴포넌트로 작업한 부분을 함수형 컴포넌트로 수정 진행 중.

 

:: class component -> function component

 

🤓 이 때, onClick 이벤트 시 페이지 이동을 위해 사용했던 함수형은 state 없는데, this.props를 사용할 수 있나요?

 

컴파일부터 안됩니다. 

this.props.history.push(경로); 를 더이상 사용할 수 없었다.

  goToTheater = () => {
    const { history } = this.props;
    history.push('/theater/list');
  };

 

 

 

react-router v5를 기반으로 설명 합니다. (v6버전 관련 내용 포스팅, 공식문서)

[ 해결 ]

함수형에서 push메서드를 사용해 페이지를 이동하기 위해서는 useHistory라는 hook을 사용해야합니다.

 

React Router 공식 문서 - Hook - useHistory

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


export default function QuickMenu() {
  const history = useHistory();

  const goToTheater = () => {
    history.push('/theater/list');
  };

  return (
    <QuickMenuButton onClick={goToTheater}>
     버튼
    </QuickMenuButton>
  );
}
.
.
.

 

 

 

 

[시행착오들]

 

🤓  그럼 useState를 사용해서 hisroty를 넣고 그 값에 push하면 안될까?

const [isHistory, setHistory] = useState(window.history);
  
const goToTheater = () => {
  setHistory(isHistory.push('/theater/list'));
};

TypeError: isHistory.push is not a function

안되네?

history는 객체인데, 이리저리 중괄호를 붙여봐도 같은 결과

 

 

🤓  pushState()라는 메서드가 url을 바꿔준다던데, 써볼까?

  const [isHistory, setHistory] = useState(window.history);

  const goToTheater = () => {
    setHistory(isHistory.pushState({}, null, '/theater/list'));
  };

정말 url만 바뀝니다!

 

History.pushState() : 브라우저의 세션 기록 스택에 state를 추가하는 메서드 (MDN 명세) 

 

pushState()는 reload를 해주지 않고 url만 바꿔줍니다.