React - [onclick - history]

history

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

- 리액트에서 Router는 path를 이용해서 라우팅할 컴포넌트를 지정해주는데 이때 라우터는

해당 컴포넌트에게 props로 history를 넘겨준다. 이러한 history는 여러 객체를 담고 있는데

{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

위 와 같이

 

goBack() : 이전 페이지

goForward() : 다음 페이지

와 같은 기능과

 

가장 빈번하게 쓰이는

push('경로')

함수가 들어있다.

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { CssBaseline } from '@material-ui/core';
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Home from './containers/home/Home';
import LoginPage from './containers/loginPage/LoginPage';
import SignupPage from './containers/loginPage/SignupPage';

ReactDOM.render(
  <React.StrictMode>
    <CssBaseline />
    <Router>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/login' component={LoginPage} />
        <Route exact path='/signup' component={SignupPage} />
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

 

라우터에서 signup으로 넘기는 과정에서 SignupPage라는 컴포넌트에 history객체를 넘겨준다.

이를 이용해서 버튼을 이용하여 페이지를 변경시키면

 

 

export default function Login({history}){

return(){

	<Button className={classes.loginFacebook} onClick={() => {
       history.push('/signup')}}>FaceBook으로 간편하게 가입하기</Button>
                        
}

이러한 형태로 push 함수를 이용해서 경로를 넘겨서 onClick이벤트를 통해서 페이지 이동을 시킬수 있다.