2022/12/15 - History in React

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

리액트는 SPA이기 때문에 (물론 페이지마다 리액트르 구동하는 방법을 중간에 섞는 방법을 이용하여 SPA가 아닌 방식을 사용할 수 있기는 하다) History를 바꾸는 것이 일반 html에서 페이지 이동에서 사용하는 방법과 다르다. 일반적인 javascript를 이용한 web의 페이지 redirect는 다음과 같은 방법으로 실행한다.

Javascript

history.push(location)

라우터가 history를 관리하는 리액트와 같은 경우에는 useHistory를 사용하였다. 였다라고 한 이유는 과거의 버전과 현재 버전이 history를 관리하는 방법이 다르기 때문이다.

React

import { useHistory } from 'react-router-dom';
//컴포넌트 내부
const history = useHistory();
function handleUseHistory() {
    history.push('/test'); // /test로 url 이동
}

이번에 react와 새로운 react router를 사용했더니 useHistory가 없다고 나와서 다시 검색해보니, 현재는 useHistory의 기능이 useNavigation이 계승하였다