history

리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용해서 페이지의 기록을 알 수 있기 때문이다.

Router로 컴포넌트의 Path와 라우팅할 컴포넌트를 정해줄 수 있는데, 라우터는 props를 통해 history 객체를 전달받게 된다.

history객체를 콘솔로 찍어보면, goBack(), goForward() 등 앞/뒤로 이동할 수 있는 메소드 뿐만 아니라 다양한 메소드와 관련한 객체들이 존재한다.
이 중 가장 빈번히 이용되는 메소드가 push() 인데,

histiry.push('이동하고자 하는 path')를 통해 원하는 컴포넌트로 이동이 가능하다.

샘플 소스코드

./src/APP.js

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route exact path={"/"} component={Home} />
          <Route path={"/about"} component={About} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

./src/Home.js

import React from "react";

function Home({ history }) {
  return (
    <div>
      <button onClick={() => history.push('/about')}>about으로 이동</button>
    </div>
  );
}

export default Home;

./src/About.js

import React from "react";

function About({ history }) {
  console.log(history);
  return (
    <div>
      <button onClick={() => history.push("/")}>home으로 이동</button>
    </div>
  );
}

export default About;

여기서 궁금한 점!!
history.push() 와 window.location.href='/pathname'의 공통점 차이점이 뭘까?!!

공통점

다른 페이지로 이동

차이점

• http 요청
  history.push X | window.location.href O

• 새로고침
  history.push X | window.location.href O

• Application 상태 유지
  history.push X | window.location.href X

사용 방법

history.push("/");

window.location.href="/";

사용 예시

const Community = () => {
	console.log("============== Community in !!")
    const moveRoute = () => {
        Router.push("/")
    }

    const moveHref = () => {
        document.location.href = "/"
    }

    return (
        <>
            <div>
                <Button variant="light" onClick={moveRoute}>이동테스트(Route)</Button>
            </div>
            <div>
                <Button variant="light" onClick={moveHref}>이동테스트(document.location.href)</Button>
            </div>
        </>
    )
}

export default Community

결론

좋은 UX상태 지속성을 위한다면 일반적인 페이지 이동은 history.push가 더 나은 선택일 테지만 이동과 함께 새로고침이 필요한 경우는 window.location.href를 이용하면 되겠다.