React Router를 이용한 Layout 구성하기 - React 배우기

React Router를 이용한 프로젝트 시작하기

https://github.com/oddoddo/-react-js-layout

React Router란?

https://github.com/remix-run/react-router

• React Router는 React에서 라우팅 처리를 도와주는 라이브러리이다.

• 장점

  • 쉬운 설치와 사용 : npm 또는 yarn을 이용하여 쉽게 설치할 수 있다.
  • 컴포넌트 기반 라우팅 : 라우팅을 위한 컴포넌트를 만들어 사용할 수 있다.
  • 코드의 가독성 및 유지보수 : 코드의 가독성이 높아져 유지보수가 쉽다.
  • 다양한 기능 : 링크, 중첩된 라우팅, 동적 라우팅 등 다양한 기능을 제공한다.

- 프로젝트에 라우터 설치하기

• 라우터를 적용하기 위해서는 react-router-dom 라이브러리를 설치해야 한다.

yarn add react-router-dom
npm install react-router-dom

React Router 사용해보기

- 라우터 설정하기

Route path 속성은 라우터의 경로를 설정하고, element 속성은 해당 경로로 이동했을 때 보여줄 컴포넌트를 설정한다.

• src 디렉토리에 App.jsx 파일을 수정한다.

import React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

const App = () => {
    return (
        <>
            <ul>
                <li>
                    <a href="/">home</a>
                </li>
                <li>
                    <a href="/about">about</a>
                </li>
                <li>
                    <a href="/login">sign</a>
                </li>
            </ul>
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<h2>홈 페이지</h2>} />
                    <Route path="/about" element={<h2>About 페이지</h2>} />
                    <Route path="/login" element={<h2>Login Page</h2>} />
                </Routes>
            </BrowserRouter>
        </>
    )
}

export default App

- 라우터 분리하기

• src/components/ 디렉토리에 Routers.js 파일을 만들어 라우터 설정을 분리한다.

import React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

const Routers = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<h2>Home Page</h2>} />
                <Route path="/about" element={<h2>About Page</h2>} />
                <Route path="/login" element={<h2>Login Page</h2>} />
            </Routes>
        </BrowserRouter>
    )
}

export default Routers

• src 디렉토리에 App.jsx 파일을 수정한다.

import React from 'react'
import Routers from './routers'

const App = () => {
    return <Routers />
}

export default App

- 라우터에 컴포넌트 적용

Home, About, Login 컴포넌트를 만들어 라우터에 적용해보자.

• src/views 디렉토리에 Home.jsx 파일을 만든다.

import React from 'react'

const Home = () => {
    return <div>Home</div>
}

export default Home

• src/views 디렉토리에 About.jsx 파일을 만든다.

import React from 'react'

const About = () => {
    return <div>About</div>
}

export default About

• src/views 디렉토리에 Login.jsx 파일을 만든다.

import React from 'react'

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

export default Login

• Routers.jsx 에 컴포넌트를 적용한다.

import React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
import Login from './views/Login'

const Routers = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/login" element={<Login />} />
            </Routes>
        </BrowserRouter>
    )
}

export default Routers

- 각 페이지에 다른 레이아웃 적용하기

header, footer, main으로 구성된 레이아웃이 있는가하면 main으로만 구성된 레이아웃이 있는 경우도 있다. 라우터를 이용하면 각 페이지에 다른 레이아웃을 적용할 수 있다.

• src/components/layout 디렉토리에 Header.jsx 파일을 만든다.

import React from 'react'

const Header = () => {
    return (
        <div>
            <h1>logo</h1>
            <nav>
                <ul>
                    <li>
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <a href="/about">About</a>
                    </li>
                    <li>
                        <a href="/login">Login</a>
                    </li>
                </ul>
            </nav>
        </div>
    )
}

export default Header

- Footer 컴포넌트 만들기

• src/components/layout 디렉토리에 Footer.jsx 파일을 만든다.

import React from 'react'

const Footer = () => {
    return <div>Footer</div>
}

export default Footer

- Layout 컴포넌트 만들기

• src/components/layout 디렉토리에 Layout.jsx 파일을 만든다.
• react-router-dom의 Outlet 컴포넌트는 중첩된 라우터의 자식 컴포넌트를 렌더링하는 컴포넌트이다.

import { Outlet } from 'react-router-dom'
import Footer from './Footer'
import Header from './Header'

const Layout = () => {
    return (
        <div>
            <Header />
            <main id="main">
                <Outlet />
            </main>
            <Footer />
        </div>
    )
}

export default Layout

- Router 컴포넌트 만들기

• src 디렉토리에 Routers.jsx 파일을 만든다.

import React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
import Login from './views/login'

const Routers = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route element={<Layout />}>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/login" element={<Login />} />
                </Route>

                <Route path="/signin" element={<Signin />} />
            </Routes>
        </BrowserRouter>
    )
}

export default Routers

- 메뉴에 active 클래스 추가하기

• react-router-dom의 NavLink 컴포넌트를 사용하면 현재 경로와 일치하는 링크에 active 클래스를 추가할 수 있다.

import { Link, useLocation } from 'react-router-dom'

function Header() {
    const location = useLocation()

    return (
        <header>
            <h1>logo</h1>
            <nav>
                <ul>
                    <li className={location.pathname === '/' ? 'active' : ''}>
                        <Link to="/">Home</Link>
                    </li>
                    <li className={location.pathname === '/about' ? 'active' : ''}>
                        <Link to="/about">About</Link>
                    </li>
                    <li className={location.pathname === '/login' ? 'active' : ''}>
                        <Link to="/login">Login</Link>
                    </li>
                </ul>
            </nav>
        </header>
    )
}

export default Header

- 메뉴 배열로 만들어 반복문으로 출력하기

• 메뉴를 배열로 만들어 반복문을 사용하여 출력할 수 있다.

import { Link, useLocation } from 'react-router-dom'

function Header() {
    const location = useLocation()
    const menus = [
        { to: '/', title: 'Home' },
        { to: '/about', title: 'About' },
        { to: '/login', title: 'Login' },
    ]

    return (
        <header>
            <h1>logo</h1>
            <nav>
                <ul>
                    {menus.map((menu, index) => (
                        <li key={index} className={location.pathname === menu.to ? 'active' : ''}>
                            <Link to={menu.to}>{menu.title}</Link>
                        </li>
                    ))}
                </ul>
            </nav>
        </header>
    )
}

export default Header