[ToyProject-Todomate] 투두메이트 클론 프로젝트 09

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

 

어제의 오류는 useHistory의 버전 문제라고 해서 npm uninstall --save 를 이용해 패키지를 삭제하고 다운그레이드를 하려고 한다.

 

 

npm uninstall --save history@5 react-router-dom@6

 

위의 명령어로 설치한 것을 삭제하고, 다시 react-router-dom 을 설치한다.

 

npm install react-router-dom@5

 

그리고 index.js 파일의 App 컴포넌트를 <BrowserRouter> </BrowserRouter>로 감싸준다.

(✔ Strict모드 컴포넌트는 삭제했어요!)

 

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

 

그 다음 App.js에 여러가지 패키지들을 import 해온다.

우선 이렇게 세 가지를 import 한다.

 

 

import { Link, Route, Switch } from 'react-router-dom';

 

 

그 다음엔 페이지가 바뀌어야 할 곳에 Route 컴포넌트를 넣어준다.

나의 경우에는 화면의 일부가 아닌 전체가 새로운 화면으로 교체되어야 하기 때문에 return 다음 ThemeProvider 컴포넌트의 다음에 Route 컴포넌트를 넣어줬다.

 

Route 의 첫번째는 /로 App 컴포넌트가 들어갈 수 있도록 

 

<Route exact path="/">
  <div className="App">
    <div className="header">
      <img className="main_img" src="images/todomate.jpg" />
      <h1>todo mate</h1>
      <h3>할 일을 작성, 계획, 관리하세요.</h3>
     </div>
     <div className="start_btn">
      <Button className="join_btn" variant="contained" color="btn">
      가입하기
      </Button>
      <Button className="signin_btn" color="btn" variant="contained">
      로그인
      </Button>
    </div>
  </div>
</Route>

 

위와 같이 코드를 짜 주고,

/signin path에는 Signin 컴포넌트를 넣어준다.

 

<Route exact path="/signin">
	<Signin />
</Route>

 

이렇게 하면 로컬 주소 /signin을 했을 때 저번에 Signin 컴포넌트에 넣어둔 MUI FormControl 컴포넌트가 나타난다.

그럼 로그인 버튼을 클릭했을 때 /signin으로 넘어가게 하려면?

 

 

 

이제 useHistory를 써보자!

 

 

App.js 파일에 useHistory를 import 한다.

 

import { useHistory } from 'react-router-dom';
// 이미 react-router-dom을 이용해서 Route를 import 하고 있어서 아래와 같이 할 수 있다.
// import { Route, useHistory } from "react-router-dom";

 

 

 

그리고 App( ) 함수 안에 let history = useHistory();를 넣어 hook 처럼 useHistory()를 사용한다.

Button 컴포넌트 중 로그인 버튼에 onClick을 사용하는데, 내부에 콜백함수를 선언하고 history 기능을 사용한다.

 

 

<Button className="signin_btn" color="btn" variant="contained" onClick={()=>{ history.push('/signin') }}>

 

 

라우터 완성~!

 

인줄 알았지만 "/signin"으로 접속하면 "/" 페이지 하단에 표시되고 있기 때문에 Switch 문법을 통해 해당 화면만 표시되도록 만들어 준다.

Route 컴포넌트 밖에 <Switch></Switch> 로 감싸주면 된다.

 

 

최종 코드는 이렇다.

 

import React from "react";
import "../stylesheets/App.css";
import { Button  } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { Switch, Route, useHistory } from "react-router-dom";

import Signin from "./Signin";

const theme = createTheme({
  status: {
    danger: "#e53e3e",
  },
  palette: {
    primary: {
      main: "#0971f1",
      darker: "#053e85",
    },
    neutral: {
      main: "#64748B",
      contrastText: "#fff",
    },
    btn: {
      main: "#f2f2f2",
      contrastText: "#111",
    },
  },
});

function App() {
  let history = useHistory();

  return (
    <ThemeProvider theme={theme}>
      <Switch>
        <Route exact path="/">
          <div className="App">
            <div className="header">
              <img className="main_img" src="images/todomate.jpg" />
              <h1>todo mate</h1>
              <h3>할 일을 작성, 계획, 관리하세요.</h3>
            </div>
            <div className="start_btn">
              <Button className="join_btn" variant="contained" color="btn">
                가입하기
              </Button>
              <Button
                className="signin_btn"
                color="btn"
                variant="contained"
                onClick={() => {
                  history.push("/signin");
                }}
              >
                로그인
              </Button>
            </div>
          </div>
        </Route>

        <Route exact path="/signin">
          <Signin />
        </Route>
        </Switch>

    </ThemeProvider>
  );
}

export default App;