[React, Firebase] TwitterCloneCoding 0.1 router 설정

- 앞으로 우리가 render 시킬 routes 는 우리의 로그인 여부에 따라 달라진다.

 

1. routes 폴더 생성

2. terminal 창에서 react router dom 설치
> npm i react-router-dom

 

< Home.js >

import React from 'react';
const Home=()=><span>Home</span>;
export default Home;

< Auth.js >

import React from 'react';
const Auth=()=><span>Auth</span>;
export default Auth;

< App.js >

import React from 'react';
import AppRouter from "./Router";
function App() {
  return (
    <AppRouter />
  );
}

export default App;

< Router.js >

import React, {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;

 

- useState를 통해 isLoggedIn의 초기값을 false로 설정한다.

isLoggedIn : false → Auth.js를 보여준다.

isLooggedIn : true → Home.js를 보여준다.

 

 

< false인 경우 화면 >

< true인 경우 화면 >

<> </>

fragment

: 부모 요소가 없는데 많은 요소를 render 하고싶을 때, div나 span등의 태그가 넣기 싫을 때 사용한다.