React Router v6
React Router
리액트에서 SPA(Single Page Application)을 제작 하기 위해서는 Router(라우터)라는 라이브러리가 필요하다.
한 개의 페이지에서 라우터를 이용해서 여러 개의 페이지를 만들 수 있는 것이다.
설치
터미널로 npm을 통해서 라우터를 설치한다.
코드
npm install react-router-dom라우터의 기본 사용법
- import 로 'react-router-dom' 에서 { BrowserRouter, Routes, Route } 를 불러온다.
- BrowserRouter > Routes > Route 의 구조로 이루어 진다.
- Route 에는 path 와 element 속성으로 이루어져 있는데, path 는 페이지 URL의 맨 뒤 경로를 나타내고 element 에는 path의 경로에 진입했을 때 보여줄 컴포넌트 가 와야한다.
Home의 기본 주소 : 진입 시 <Home /> 컴포넌트를 불러온다.
path='/detail' 인 주소 : 진입 시 <Detail /> 컴포넌트를 불러온다.
코드
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './routes/Home';
import About from './routes/About';
import Navigation from './components/Navigation';
function App() {
return (
<BrowserRouter>
<Navigation />
// Routes : Route의 모음
<Routes>
// Route : 클릭을 했을 때 해당되는 주소의 컴포넌트를 불러오는 역할
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/detail' element={<Detail />} />
</Routes>
</BrowserRouter>
);
}
export default App;라우터의 구조
라우터는 라우터를 통해서 이동하는 페이지와 일반페이지를 구분한다. 주로 src 폴더에 components 폴더와 routes 폴더로 구분한다.
BrowserRouter
- 웹 애플리케이션에 HTML5 History API 를 사용하여 페이지를 새로고침하지 않고 주소를 변경한다.
- 현재 주소에 관련된 정보를 컴포넌트에서 사용할 수 있도록 한다.
코드
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
// 필수
<BrowserRouter>
<App/>
</BrowserRouter>
);Route
- 주소규칙(path props)에 따라 어떤 컴포넌트(element props)를 보여줄지 정의한다.
코드
<Route path="주소규칙" element={<컴포넌트 이름/>}/>Routes
- Route 컴포넌트들은 반드시 Routes 의 자식 컴포넌트여야 한다.
- Routes 는 여러 Route 를 감싸서 주소규칙이 가장 일치하는 하나의 라우트를 렌더링한다.
- 모든 주소규칙와 일치하지 않을 때 보여 줄 Not Found 화면도 구현할 수 있다.
- path props 을 "/*" 라고 설정하면 해당 Route는 모든 경로에 매치가 가능하다.
- 만약 현재 브라우저 주소가 나머지 Route의 주소규칙과 일치하지 않았다면 이 Route가 렌더링된다.
코드
<Routes>
<Route path="/" .... />
<Route path="/*" element={<NotFound/>}/>
</Routes>Link
- App.js 에서 라우터로 지정해놓은 경로들을 사용해서 해당 컴포넌트를 불러온 페이지로 이동시켜 주는 컴포넌트다.
- 컴포넌트 자체는 a 태그 로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장되어 있다.
- HTML5 History API 를 이용하여 페이지의 주소만 변경한다.
- 반드시 import { Link } from 'react-router-dom'; 로 Link를 불러오고 사용해야 한다.
코드
<Link to="주소">내용</Link>Link를 사용하지만 실제 브라우저에서는 a태그로 표기되어서 CSS 스타일 적용도 a태그로 적용한다.
NavLink
- Link 컴포넌트 와 유사하지만 현재 사용자 브라우저 경로와 to props 의 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스 를 적용할 수 있는 컴포넌트이다.
코드
const activeStyle={
textDecoration: "underline"
};
const activeClassName = "underline";
<NavLink to="messages" style={({ isActive }) => isActive ? activeStyle : undefined}>Messages</NavLink>
<NavLink to="messages" className={({ isActive }) => isActive ? activeClassName : undefined}>Tasks</NavLink>URL 파라미터와 쿼리 스트링
useParams
- /product/:productId 와 같이 경로에 : 를 사용하여 설정 한다.
- URL 파라미터가 여러개인 경우엔 /product/:productId/:productName 과 같은 형태로 설정할 수 있다.
코드
import { useParams } from 'react-router-dom';
const { 파라미터명 } = useParams(); // const 변수명 = useParams().파라미터명;useLocation
- 상위 컴포넌트에서 props나 구조분해할당 을 통해 하위 컴포넌트가 받은 데이터를 라우터를 통해 다른 컴포넌트로 데이터를 전송하는 법이다.
- Link태그의 to프로퍼티로 URL의 주소를 지정하고 state프로퍼티로 보낼 데이터(props / 구조분해할당)를 지정해주면 된다.
- 이 때, 데이터는 브라우저의 URL을 통해서 보내진다.
| 속성 | 설명 |
|---|---|
| hash | 주소의 #문자열 뒤의 값 |
| pathname | 현재 주소 경로 |
| search | 물음표(?)를 포함한 쿼리스트링 |
| state | 페이지로 이동시 임의로 넣을 수 있는 상태 값 |
| key | location 객체의 고유 값, 초기값은 default, 페이지가 변경될 때 마다 고유의 값이 생성된다. |
코드
/* 상위로부터 props로 받고 하위에게 props로 보내는 법 */
import React from 'react';
import { Link } from 'react-router-dom';
export default function Component(props) {
const {data1, data2, data3...} = props;
return (
<Link to={'/detail'} state={props}>
);
}코드
/* 상위로부터 구조분해할당으로 받고 하위에게 구조분해할당으로 보내는 법 */
import React from 'react';
import { Link } from 'react-router-dom';
export default function Component({data1, data2, data3...}) {
return (
<Link to={'/detail'} state={{data1, data2, data3...}}>
);
}다른 컴포넌트의 데이터(props) 를 useLocation 을 통해 받아와 변수에 할당한다.
코드
import React from 'react';
import { useLocation } from 'react-router-dom';
export default function Detail() {
const location = useLocation();
console.log(location); // 객체 형태로 데이터가 콘솔에 찍힘
}객체형태로 받아진 데이터의 키값 을 구조분해할당 하여 사용한다.
코드
const { title, year, summary, poster, genres } = location.state;useNavigate
- Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 경우, 뒤로가기 등에 사용하는 Hook 이다.
- replace 옵션을 사용하면 페이지를 이동할 때 히스토리를 남기지 않는다.
코드
import React from 'react';
import { useNavigate } from 'react-router-dom';
export default const Product = () => {
const navigate = useNavigate();
return (
<ul>
<li><button onClick={() => navigate(-2)}>Go 2 pages back</button></li>
<li><button onClick={() => navigate(-1)}>Go back</button></li>
<li><button onClick={() => navigate(1)}>Go forward</button></li>
<li><button onClick={() => navigate(2)}>Go 2 pages forward</button></li>
<li><button onClick={() => navigate('/')}>Go Root</button></li>
<li><button onClick={() => navigate('/', {replace: true})}>Go Root</button></li>
</ul>
);
}Reference
반응형