개인 프로젝트를 웹으로 진행하면서 리액트 앱의 라우팅이 필요한 상황이 있어 react-router-dom 라이브러리를 추가로 설치하여 사용하고 있다.
react-router-dom을 사용하면 빠질 수 없는 history에 대해 정리하고자 한다.
history
리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지의 기록을 알 수 있기 때문이다.
아래 샘플 코드의 App.js에서와 같이 Router로 컴포넌트의 Path와 라우팅할 컴포넌트를 정해줄 수 있는데, 해당하는 라우터는 props를 통해 history 객체를 전달받게 된다.
history 객체를 콘솔로 찍어보면 아래와 같이 goBack(), goForward() 등 앞/뒤로 이동할 수 있는 메소드 뿐만 아니라 다양한 메소드와 관련 객체들이 존재한다.
이 중 라우팅 변경을 위해 가장 빈번히 사용되는 메소드가 push()인데, history.push('이동하고자 하는 path') 를 통해 원하는 컴포넌트로 이동이 가능하다.
{length: 2, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
action: "PUSH"
block: ƒ block(prompt)
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 2
listen: ƒ listen(listener)
location: {pathname: "/about", search: "", hash: "", state: undefined, key: "mlmosl"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)
__proto__: Object샘플 소스코드
./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;
