React Router란?
React에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리이다.
단일 페이지로 이루어진 SPA 방식의 React는 페이지를 이동하기 위하여Router를 사용해야한다.
1. React Router 기본 사용 방법
1) React Router 설치
터미널에 아래 코드를 입력하여 라우터를 설치할 수 있다. @6은 버전을 의미한다.
npm install react-router-dom@6설치확인
package.json 파일에서 react-router-dom이 정상적으로 설치되었는지 확인한다.
"dependencies": {
"react-router-dom": "^6.15.0",
},2) React Router 불러오기
메인 컴포넌트가 될 App.js에 react-router-dom를 import 한다.
BrowserRouter, Route, Routes 모두 라우터에 필요한 기능이므로 import 해준다.
import {BrowserRouter, Route, Routes} from 'react-router-dom';3) Routes 만들기
BrowserRouter, Route, Routes 를 이용하여 이동할 수 있는 페이지 컴포넌트를 나열해준다.
메인 컴포넌트 App의 return 내에 가장 상위 태그로 BrowserRouter를 추가하여 감싸준다.
불러올 수 있는 페이지 컴포넌트들을 Routes 태그 내부에 Route 태그로 불러온다.
(Routes 태그 밖에 있는 부분은 Route의 페이지 컴포넌트들이 변해도 바뀌지 않고 고정되어 있다.)
path는 경로를 의미하고, element는 그 경로일 때 랜더할 페이지 컴포넌트를 의미한다.
path가 '/' 인 경우는 경로에 아무것도 없는것을 의미하므로 가장 초기 페이지가 된다.
function App() {
return (
<BrowserRouter>
<div className="App">
<h2>App.js</h2> // 고정적으로 보이는 부분
<Routes> // 경로에 따라 페이지 달라짐
<Route path='/' element={<Home/>} />
<Route path='/new' element={<New/>} />
<Route path='/edit' element={<Edit/>} />
<Route path='/diary' element={<Diary/>} />
</Routes>
</div>
</BrowserRouter>
);
}4) 링크 연결 버튼 만들기
페이지 라우터를 이동할 수 있는 버튼을 만들기 위해서는 별도의 링크 컴포넌트를 생성해야 한다.
react-router-dom에서 Link 기능을 import 하여 사용한다.
Link 태그 안에 to 프로퍼티에 경로를 넣어준다. 그러면 해당 Link는 to 안에 들어간 경로로 넘어가는 버튼이 된다.
해당 컴포넌트를 App.js에 불러와서 사용한다.
import {Link} from 'react-router-dom';
const RouteTest = () => {
return (
<>
<Link to={'/'}>Home</Link>
<br />
<Link to={'/diary'}>DIARY</Link>
<br />
<Link to={'/new'}>NEW</Link>
<br />
<Link to={'/edit'}>EDIT</Link>
</>
);
};
export default RouteTest;5) App.js 완성코드
function App() {
return (
<BrowserRouter>
<div className="App">
<h2>App.js</h2>
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/new' element={<New/>} />
<Route path='/edit' element={<Edit/>} />
<Route path='/diary' element={<Diary/>} />
</Routes>
<RouteTest/> // Link 사용한 컴포넌트
</div>
</BrowserRouter>
);
}2. React Router 기능들
useParams, useSearchParams, useNavigate 처럼 React가 제공하는 React Hook은 아니지만 별도의 라이브러리(react-router-dom)가 제공하는 사용자 정의 Hook들을 custom Hooks라고 한다.
이 기능들은 react-router-dom 라이브러리에서 제공하는 custom Hooks이므로 import 하여 사용한다.
import { useParams,useSearchParams,useNavigate } from 'react-router-dom';1) useParams - Path Variable
App.js의 Route path 경로에 사용했던 id를 useParam으로 추출하여 사용할 수 있다.
경로가 'http://도메인/diary/1' 일 경우 '1'이 id로 추출됨.
// App.js
<Route path='/diary/:id' element={<Diary/>} />// Diary.jsx
const {id} = useParams();
console.log(id); // 1이 추출됨2) useSearchParams - Query String
useSearchParams은 useState처럼 배열을 반환한다.
배열의 첫번째 요소는 Query String을 get으로 받아서 쓸 수 있고, 두번째 요소는 Query String을 변경할 수 있는 함수이다.
경로를 'http://도메인/edit?id=10&mode=dark' 이라고 할 때,
edit? 뒤에 오는 'id=10&mode=dark'가 Query String 이다.
그리고 Query String은 페이지 라우터에 영향을 주지 않는다.
Query String인 id와 mode를 searchParams.get('id'); 처럼 get으로 값을 받을 수 있다.
또한 setSearchParams으로 param을 변경할 수 있다.
button의 onClick 이벤트 안에 setSearchParams 함수를 호출하고 바꾸고 싶은 Query String을 객체로 불러와서 바꿀 수 있다.
// Edit.jsx
const Edit = () => {
const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get('id');
const mode = searchParams.get('mode');
console.log("id:", id);
console.log("mode:", mode);
return (
<div>
<h1>Edit</h1>
<p>이곳은 일기 수정페이지 입니다.</p>
<button onClick={ ()=>setSearchParams({who:'doyoung'}) }>QS 바꾸기</button>
</div>
);
};3) useNavigate - Page Moving
useNavigate는 페이지를 이동할 수 있는 함수를 반환하는데 그 함수의 이름을 navigate에 받아서 onClick 이벤트에 호출해주면 경로를 이동할 수 있다.
예를 들어, 로그인이 안된 사용자가 회원만 사용 가능한 페이지에 접근하려고 할 때 강제로 로그인페이지로 보내버리는 기능 등에 주로 사용한다.
button의 onClick 이벤트 안에 navigate 함수를 호출하고 경로를 넣어주면 클릭 시 페이지가 이동된다.
그리고 navigate 함수 안에 '-1'을 넣어주면 페이지 뒤로가기 기능이 된다.
const Edit = () => {
const navigate = useNavigate();
return (
<div>
<h1>Edit</h1>
<p>이곳은 일기 수정페이지 입니다.</p>
<button onClick={ ()=>{navigate('/home');} }>HOME으로 가기</button>
<button onClick={ ()=>{navigate(-1);} }>뒤로가기</button>
</div>
);
};