#17 Router

 

리액트 앱에서 컴포넌트의 모든 요소를 전부 동시에 보여줄 필요는 없다.

 

사용자가 한 번에 그 기능을 다 사용하지도 않을 뿐더러 리소스 사용 측면에 있어서도 이는 비효율적이다.

 

그래서 router기능을 이용해 각 기능들을 다른 주소에 분리하고, 원할때만 이를 가져와 보여줄 수 있다.

 

정확히 말하자면 다른 주소에 있는 다른 화면을 보여주는 것이 router이다.

 

이를 이용해 메뉴를 클릭하면 다른 탭을 보여준다거나 하는 기능을 추가할 수 있다.

 

이는 react 내장 기능은 아니므로 npm을 이용해 라이브러리를 설치해야한다.

 

npm i react-router-dom

 

/*  src/app.js  */

import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom'

function App() {
    return (
        <>
            hello router
        </>
    )
}

export default App

 

hello router가 잘 출력이 되었다면 이제 App 컴포넌트를 다음과 같이 바꿔보자.

 

/*  src/App.js  */

function App() {
   return (
      <>
         <Router>
            <header>
               <nav>
                  <Link to='/'> Home </Link>
                  <Link to='/counter'> Counter </Link>
                  <Link to='/comment'> Comment </Link>
                  <Link to='/login'> Login </Link>
               </nav>
            </header>
              
            <Routes>
               <Route path='/' element = {<Index/>}/>
               <Route path='/counter' element = {<Counter/>}/>
               <Route path='/comment' element = {<Comment/>}/>
               <Route path='/login' element = {<Login/>}/>
            </Routes>
         </Router>
      </>
   )
}

 

앞서 react-router-dom에서 BrowserRouter (이하 Router), link, routes, Route를 가져왔는데,

 

각각을 전부 사용해본 것이다.

 

우선 Router는 라우터 기능을 사용할 것들을 하나로 묶어주는 역할을 한다.

 

Link는 html의 anchor element와 동일한 기능으로, 클릭하면 그 주소에 대응하는 <Route/>의 element를 

 

불러올 것이다.

 

Route element에 path 값은 연결하고 싶은 Link의 to와 동일한 값을 주면 된다.

 

element에는 불러오고 싶은 컴포넌트를 값으로 준다.

 

이런 Route들을 묶어주는 기능을 하는게 <Routes/>이다.

 

위의 컴포넌트를 예시로 들면,

 

<nav> element안의 Counter를 클릭하면 Link의 to의 value인 '/counter'를

 

path attribute의 value로 가지는 Route element를 확인한다.

 

그리고 그 Route element가 가진 element attribute의 value에 해당하는 <Counter/> 컴포넌트를 가져온다.

 

이제 각 Route에 있는 컴포넌트를 대충 만들어서 import 하자.

 

src 폴더에 pages 폴더를 만들고 그 안에 다시 comment, counter, index, login 폴더를 만든다.

 

각 폴더 안에는 index.jsx 파일을 만들고 다음과 같이 컴포넌트를 만들어 export 한다.

 

/*  src/pages/comment/index.jsx  */

const Comment = () => {
    return(
        <>
            Comment Page
        </>
    )
}

export default Comment

 

/*  src/pages/counter/index.jsx  */

const Counter = () => {
    return(
        <>
            Counter Page
        </>
    )
}

export default Counter

 

/*  src/pages/index/index.jsx  */

const Index = () => {
    return(
        <>
            Index Page
        </>
    )
}

export default Index

 

/*  src/pages/login/index.jsx  */

const Login = () => {
    return(
        <>
            Login Page
        </>
    )
}

export default Login

 

이것들을 각각 App.js에서 import 한다.

 

import { BrowserRouter as Router, Link, Routes, Route } from 'react-router-dom' 

import Index from './pages/index/index.jsx'
import Comment from './pages/comment/index.jsx'
import Counter from './pages/counter/index.jsx'
import Login from './pages/login/index.jsx'

(...생략)