[React] React Router v6

I'm Your Cho-i·2022년 9월 6일
0

React

목록 보기
2/13
post-thumbnail

📌라우팅

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미.

📌싱글 페이지 애플리케이션

리액트 라우터와 같은 라우팅 시스템은 사용자의 브라우저 주소창의 경로에 따라 알맞는 페이지를 보여주는데, 이후 링크를 눌러서 다른 페이지로 이동하게 될 때 서버에 다른 페이지의 html을 새로 요청하는 것이 아니라, 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존에 페이지에 띄웠던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여줌.

📌라우터

1. react-router-dom 라이브러리 설치

npm i react-router-dom

2. BrowserRouter 사용

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

3. Route

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

Route 컴포넌트는 Routes 컴포넌트 내부에서 사용

App.js

import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';
import EmptyPage from './component/EmptyPage';
import { Routes, Route } from 'react-router-dom';

function App() {
	return (
		<div className="App">
      		<Header />
      		<Routes>
      			<Route path="/" element={<DayList />} />
				<Route path="/day/:day" element={<Day />} />
  				<Route path="*" element={<EmptyPage />} />
    		</Routes>
		</div>
	);
}

export default App;

Link 컴포넌트를 사용하여 다른 페이지로 이동.
웹 페이지에서는 원래 링크를 보여줄 때 a 태그를 사용하는데, 리액트 라우터를 사용하는 프로젝트에서 a 태그를 바로 사용하면 안됨. 왜냐하면, a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문.

Link 컴포넌트 역시 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있음.

<Link to="경로">링크 이름</Link>

Header.js

import { Link } from "react-router-dom";

function Header() {
	return (
		<div className="header">
			<h1>
				<Link to="/">토익 영단어(고급)</Link>
			</h1>
			<div className="menu">
				<Link to="/" className="link">단어 추가</Link>
				<Link to="/" className="link">Day 추가</Link>
			</div>
		</div>
	);
}

export default Header;

5. URL 파라미터

URL 파라미터는 useParams 라는 Hook을 사용하여 객체 형태로 조회할 수 있음.
URL 파라미터의 이름은 라우트 설정을 할 때 Route 컴포넌트의 path props를 통하여 설정.

<Route path="/day/:day" element={<Day />} />

Day.js

import dummy from '../db/data.json'
import { useParams } from 'react-router-dom';

function Day() {
	const { day } = useParams();
	const wordList = dummy.words.filter(word => word.day === Number(day));

	return (
		<>
			<h2>Day {day}</h2>
			<table>
				<tbody>
					{
						wordList.map(word => (
							<tr key={word.id}>
								<td>{word.eng}</td>
								<td>{word.kor}</td>
							</tr>
						))
					}
				</tbody>
			</table>
		</>

	)
}

export default Day;

6. 쿼리스트링

7. 공통 레이아웃 컴포넌트

8. index props

9. useNavigate

useNavigateLink 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 상황에 사용하는 Hook

Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줌

import { useNavigate } from 'react-router-dom';

function Func() {
  const navigate = useNavigate();

  const onClickImg = () => {
    navigate(`/comment/id/등등 내가 원하는 주소`);
  };

  return (
  	<img src={...} alt={...} onClick={onClickImg} />
  );
}

export default Func;

1. useNavigate의 인자
navigate("../success", { replace: true});
첫 번째 인자로는 주소를 받으며 두 번째 인자로 { replace, state } 인수를 사용.

true를 사용한다면, navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않음. 이 때는 자신의 메인 페이지 ("/")로 돌아오게 됨.
false는 뒤로가기가 가능하며 이 것이 기본 값.

2. useHistory

<>
  <button onClick={() => navigate(-2)}>
    Go 2 pages back
  </button>
  <button onClick={() => navigate(-1)}>
    Go back
  </button>
  <button onClick={() => navigate(1)}>
    Go forward
  </button>
  <button onClick={() => navigate(2)}>
    Go 2 pages forward
  </button>
</>

https://velog.io/@chooomu/React-LinkNavLink

11. Navigate


참고 : https://velog.io/@velopert/react-router-v6-tutorial

profile
https://github.com/Cho-i

0개의 댓글