// Login.jsx
// props 의 history 로 웹url을 변경할 수 있다.
export default function Login(props) {
  console.log(props);
  function login() {
    setTimeout(() => {
      props.history.push('/');
    }, 1000);
  }
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <button onClick={login}>로그인하기</button>
    </div>
  )
}

로그인 기능은 프로젝트가 엄청나게 커짐에 따라서 아래로 들어가고 들어가고 하다보면,
위와같이 간단하게 할 수 없을 수 있다. 물론 위에서 props 를 계속 내려줄 수는 있을
것이다.

최상단에 로그인 버튼
// LoginButton.jsx
export default function LoginButton(props) {
  console.log(props);
  function login() {
    setTimeout(() => {
      props.history.push('/');
    }, 1000);
  }
  return <button onClick={login}>로그인하기</button>
}

// Login.jsx
import LoginButton from '../components/LoginButton';

export default function Login(props) {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton {...props} />
    </div>
  )
}

위처럼 props 를 아래로 계속 내려주는 것인데, 사고나기가 매우 쉽다. 좋지 않은 방법이다.
React 에서 이러한 문제를 해결하는 방법으로 HOC, higher order component 를 제공한다.

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

// 우리가 만든 컴포넌트를 withRouter 의 인자로 넘겨준다.
export default withRouter(function LoginButton(props) {
  console.log(props);
  function login() {
    setTimeout(() => {
      props.history.push('/');
    }, 1000);
  }
  return <button onClick={login}>로그인하기</button>
})