리액트 페이지 전환
우선 관련 모듈을 설치한다.
npm install react-router-dom
임포트 해서 사용할 모듈들은 아래와 같다.
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom'
사용법은
- 우선 BrowserRouter로 전체를 감싸준다.
- Link를 통해 a태그와 비슷하게 url을 변경한다.
- Route를 통해 url에 매핑된 값을 보여주도록 한다.
*리액트에서 페이지를 이동할 떄는 앵커 태그가 아닌 링크(<Link>)태그를 사용하여야한다. 앵커 태그의 href으로 페이지를 이동하는 상태값을 잃고 속도가 저하되는 등의 문제가 있기 때문이다.
*마찬가지로 location.href 역시 꼭 필요한 경우가 아니라면 다른 방법으로 url을 이동시키는 것이 좋다.
Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만을 바꾼다. 즉 페이지를 바꾸지는 않다.
import './App.css'
import {useState, useMemo} from 'react'
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom'//npm i react-router-dom
//React Router Dom -> location.href
function App(){
return (
<div>
<BrowserRouter>
<nav>
<ul>
<Link to="/">Home</Link>
</ul>
<ul>
<Link to="/about">about</Link>
</ul>
</nav>
<Routes>
<Route path='/' element={<Home/>}></Route>
<Route path='/about' element={<About/>}></Route>
</Routes>
</BrowserRouter>
</div>
)
}
function Home(){
return(
<h1>Home</h1>
)
}
function About(){
return(
<h1>About</h1>
)
}
export default App위 코드는 누르는 값에 따라 About컴포넌트나 Home컴포넌트를 랜더링 하는 예제이다.
- Link태그의 to에 해당 태그를 누르면 적용될 주소를 입력한다.
- Route의 path에 일치시킬 url을 적용한다.
- Route의 element에 마운트할 컴포넌트를 입력한다.
UseNavigate
앞서 페이지를 바꾸는 방식은 속도의 저하를 야기한다고 한 바있다. 하지만 버튼 등으로 이동을 발생시켜야 할 일도 있다. 이럴 때 useNavigate를 사용한다.
import {useNavigate} from 'react-router-dom';
export default function User(){
const navi = useNavigate();
function homeMove(){
navi('/');
}
return(
<div>
<h3>User</h3>
<button onClick={homeMove}>홈버튼</button>
</div>
)
}위 컴포넌트는 버튼을 누르면 /주소로 현재 url을 바꾸는 예제 코드이다.
- 우선 useNavigate()를 사용해 변수에 저장하였다
- 다음으로 해당 변수에 파라미터로 이동할 url 문자열을 넘긴다. 이것만으로 url 이동이 완료된다.
동적 라우팅
UserParams을 이용하면 공통된 경로로 들어가는 컴포넌트를 쉽게 처리할 수 있다.
우선
<Route path='/topics/:topicId' element={<Topic/>}></Route>
위처럼 path를 설정할 경우 :topicId에 동적인 값이 들어가게 된다. 예를 들어 /topics/a로 들어갈 경우 해당 Route에서 처리하며, element의 Topic이라는 컴포넌트를 보여주게 된다.
:이 뒤에 Path Parameter가 뒤에 이어진다.id는 해당 Path Parameter 의 이름이다.
다시 말해 /topics/a이든 /topics/b이든 /topics/c이든 해당 url이 들어오면 Topic 컴포넌트를 랜더링하게 된다.
이럴 때 Topic에서 아래의 형태로 useParams을 사용할 경우 현재 경로의 topicId값을 얻을 수 있다.
function Topic(){
let { topicId } = useParams();
console.log(topicId);
return(
<h1>Topic : {topicId}</h1>
)
} useParams을 사용하여 구조 분해 할당으로 topicId값을 받아온 것이다.
댓글