[React] 리액트 앱 라우팅 (react-router-dom, HashRouter, BrowserRouter)

01 리액트 앱 라우팅

• SPA 특성 상 페이지 여러 개를 이용한 이동이 불가능 함.
• 라우터 컴포넌트가 여러 컴포넌트 사이를 이동할 수 있게 해줌.
• 라우터의 종류로는 해시라우터 와 브라우저라우터 가 있음.

 

 

01-1  설치

npm install react-router-dom

 

 

 

 

 

02 라우터 간의 차이

• 해시(#) 라우터 는 정적인 페이지에 적합.
• 브라우저라우터 는 동적인 페이지에 적합.

 

• 해시라우터 는 새로고침을 해도 페이지 렌더링에 문제가 없다.
• 브라우저라우터 는 새로고침시 경로를 찾지 못하여 추가 설정을 요구.

 

• 해시라우터 의 경로에는 # 기호가 붙어 검색 엔진이 읽지 못함.
• 브라우저라우터 는 그런게 없어서 검색 엔진이 읽기에 수월.

 

 

 

 

 

03 해시라우터 (HashRouter)

03-1  기본 코딩

 

src

 

src/routes

• src/routes/AppRouter.js

import React from 'react'
import { HashRouter, Route, Switch, Link } from 'react-router-dom'
import Home from './Home'
import Profile from './Profile'
import SignIn from './SignIn'

function AppRouter(){
    return<HashRouter>
        <Switch>
            <Route exact path="/">
                <Home />
            </Route>
            <Route exact path="/profile">
                <Profile />
            </Route>
            <Route exact path="/signin">
                <SignIn />
            </Route>
        </Switch>
    </HashRouter>
}

export default AppRouter

 

 

src

 

src/routes

• src/routes/Home.js

import React from 'react'

const Home = () => {
    return <h1>아직 로그인 전 입니다.</h1>
}

export default Home

 

 

src

 

src/routes

• src/routes/Profile.js

import React from 'react'

const Profile = () => {
    return <h1>프로필이 없습니다.</h1>
}

export default Profile

 

 

src

 

src/routes

• src/routes/SignIn.js

import React from 'react'

const SignIn = () => {
    return <form>
        <input type="text" placeholder="이름" name="userName"/><br />
        <input type="text" placeholder="별명" name="nickName"/><br />
        <input type="text" placeholder="동네" name="userTown"/><br />
        <input type="submit" value="접속"/>
    </form>
}

export default SignIn

 

 

src

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './routes/AppRouter';

ReactDOM.render(
  <React.StrictMode>
    <AppRouter />
  </React.StrictMode>,
  document.getElementById('root')
);

 

 

AppRouter.js

Home.js

Profile.js

SignIn.js

Index.js

 

 

 

 

 

 

 

03-2  버튼을 누르면 링크 이동

 

src

 

src/routes

• src/routes/AppRouter.js

import React from 'react'
import { HashRouter, Route, Switch, Link } from 'react-router-dom'
import Home from './Home'
import Profile from './Profile'
import SignIn from './SignIn'

function AppRouter(){
    return<HashRouter>
        <ul>
            <li><Link to="/">홈</Link></li>
            <li><Link to="/profile">프로필</Link></li>
            <li><Link to="/signin">로그인</Link></li>
        </ul>
        <Switch>
            <Route exact path="/">
                <Home />
            </Route>
            <Route exact path="/profile">
                <Profile />
            </Route>
            <Route exact path="/signin">
                <SignIn />
            </Route>
        </Switch>
    </HashRouter>
}

export default AppRouter

 

 

AppRouter.js

 

 

 

 

 

 

 

03-3  사용자 관리  //  로그인, 로그아웃

 

src

 

src/routes

• src/routes/AppRouter.js

import React, { useState } from 'react'
import { HashRouter, Route, Switch, Link } from 'react-router-dom'
import Home from './Home'
import Profile from './Profile'
import SignIn from './SignIn'

function AppRouter(){

    const [ currentUser, setCurrentUser ] = useState(null)

    const signIn = user => setCurrentUser(user)
    const signOut = () => setCurrentUser(null)

    return<HashRouter>
        <ul>
            <li><Link to="/">홈</Link></li>
            <li><Link to="/profile">프로필</Link></li>
            <li><Link to="/signin">로그인</Link></li>
        </ul>

        <Switch>
            <Route exact path="/">
                <Home currentUser={currentUser} />
            </Route>
            <Route exact path="/profile">
                <Profile currentUser={currentUser} />
            </Route>
            <Route exact path="/signin">
                <SignIn currentUser={currentUser} 
                signIn={signIn} signOut={signOut}/>
            </Route>
        </Switch>
    </HashRouter>
}

export default AppRouter

 

 

src

 

src/routes

• src/routes/Home.js

import React from 'react'

const Home = (props) => {

    const { currentUser } = props

    return currentUser === null?
    <h1>아직 로그인 전 입니다.</h1> :
    <h2>{currentUser.userName}님, 환영합니다.</h2>
}

export default Home

 

 

src

 

src/routes

• src/routes/Profile.js

import React from 'react'

const Profile = (props) => {

    const { currentUser } = props

    return currentUser === null ?
    <h1>프로필이 없습니다.</h1> :
    <>
        <h2>{currentUser.userName}</h2>
        <h2>{currentUser.nickName}라는 별명 사용 중!</h2>
        <h2>{currentUser.userTown}에 거주 중!</h2>
    </>
}

export default Profile

 

 

src

 

src/routes

• src/routes/SignIn.js

import React from 'react'

const SignIn = (props) => {
    // 구조분해
    const { signIn, signOut, currentUser } = props
    return currentUser === null?
    <form onSubmit={e => {
        e.preventDefault()
        const userObj = {
            userName: e.target.userName.value,
            nickName: e.target.nickName.value,
            userTown: e.target.userTown.value,
        }
        signIn(userObj)
    }}>
        <input type="text" placeholder="이름" name="userName"/><br />
        <input type="text" placeholder="별명" name="nickName"/><br />
        <input type="text" placeholder="동네" name="userTown"/><br />
        <input type="submit" value="접속"/>
    </form> : <>
        <h1>이미 로그인 하셨습니다.</h1>
        <label htmlFor="out">로그아웃 하시겠어요?</label><br />
        <input onClick={signOut} type="button" value="Yes" id="out" />
    </>
}

export default SignIn

 

 

 

 

AppRouter.js

Home.js

Profile.js

SignIn.js