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
'Front > React' 카테고리의 다른 글
리액트 ES6 문법 정리 (0) | 2023.10.27 |
---|---|
React Table Data (0) | 2023.10.19 |
React를 이용한 layout 컴포넌트, React Router(리액트 라우터) 페이지 이동 구현하기 (0) | 2023.10.09 |
컴포넌트(Components) - React 배우기 (0) | 2023.10.08 |
엘리먼트(Element) - React 배우기 (0) | 2023.10.07 |