트위터 클론코딩 - 라우터 적용하기(isLoggedIn을 사용한 삼항연산자)

<라우터>

"어떤 화면을 보여줄지 관리해주는 친구"

"어떤 컴포넌트" 를 "렌더링" 할지 결정하는 역할

(화면을 표현하기 위한 조각을 그릴지 결정하는 역할!))

 

*컴포넌트 : 화면을 표현하기 위한 조각

*렌더링: 그린다

 

<훅스>

함수 컴포넌트는 상태 관리를 위해 훅스를 사용

훅스를 사용하려면 useState 함수를 사용, 인자로 [상태, 상태 관리 함수 이름] 과 같은 형태의 배열을 입력 받음

 

ex) useState 함수로 로그인 여부를 판단하기 위한 상태를 만들고 싶다?

이 상태를 이용해서 true/ false  에 따라 특정 컴포넌트를 보여주자!

[isLoggedIn, setIsLoggedIn] = useState(false) 와 같이 useState 함수를 사용해서 상태와 상태 관리 함수를 짝으로 만듦

isLoggedIn의 값은 setIsLoggedIn 함수만 사용해서 변경 할 수 있음

 

액션1 - useState 함수 사용하기

예를 들어 로그인이 되어있지 않은 상태일 때 로그인 페이지를 보여주려면?

 

isLoggedIn 상태를 참조해서 렌더링할 컴포넌트를 결정하면 됨

isLoggedIn 이 false면 로그인 페이지를 보여 주는 Auth 컴포넌트를 렌더링하고

isLoggedIn 이 true면 로그인 후 볼 수 있는 Home 컴포넌트를 렌더링

import { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <Router>
      <switch>
        <Route />
      </switch>
    </Router>
  );
};

export default AppRouter;

 

액션2 - 삼항 연산자와 상태로 적절한 컴포넌트 반환하기

삼항 연산자와 isLoggedIn을 조합해서 상태의 true, false에 따라 적절한 컴포넌트를 렌더링하도록 만듦

 

 

 

 

 

import { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <Router>
      <switch>
        {isLoggedIn ? (
          <Route exact path="/">
            <Home />
          </Route>
        ) : (
          <Route exact path="/">
            <Auth />
          </Route>
        )}
      </switch>
    </Router>
  );
};

export default AppRouter;

 

액션3 - npm start

npm start

App 컴포넌트에서 AppRouter 컴포넌트를 랜더링 하지 않아서 APP 만 뜬다!

 

액션4 - App.js 수정하기

 

import AppRouter from "./Router";

function App() {
  return <AppRouter />;
}

export default App;

return 을 Router.js에서의 AppRouter로 변경

 

 

but,,,,,,,,,,,,, 오류가 발생

그 이유는 버전이 달라서 문법이 바뀌었다 

 

https://velog.io/@kcdoggo/Switch-is-not-exported-from-react-router-dom-%EC%97%90%EB%9F%AC

'Switch' is not exported from 'react-router-dom' 에러

이 분 블로그 참조해서 수정완..

<Switch> 는 <Routes>로

<Router> 는 <BrowserRouter>로 변경해주면 된다..

문법도 exact는 사용하지않고 component 대신 element를 넣어줘야한다. 

import { useState } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <BrowserRouter>
      <Routes>
        {isLoggedIn ? (
          <Route path="/" element={<Home />} />
        ) : (
          <Route path="/" element={<Auth />} />
        )}
      </Routes>
    </BrowserRouter>
  );
};
export default AppRouter;

성공!!

 

액션5 - isLoggedIn 변경해 보기

useState(true) 값을 주었더니 Home이 나오는걸 볼 수 있다.