์ด์ ํฌ์คํ ์์ react router์์ ์ฃผ๋ก ์ฌ์ฉ๋๋ ์ปดํฌ๋ํธ ๋ฐ ๊ธฐ์ ๋ค์ ์์๋ณด์๋ค.
์ฃผ๋ก ์ฌ์ฉํ๋ ๊ฒ๋ฟ๋ง ์๋๋ผ react router๋ก ์ฌ๋ฌ ๊ฐ์ง ๊ธฐ๋ฅ์ ๊ตฌํํ ๋ ํ์ํ ํ ์ด๋ ์ปดํฌ๋ํธ๋ค์ด ์๋ค.
๋ณธ ํฌ์คํ ์์๋ ๋ถ๊ฐ์ ์ธ ํ ๊ณผ ์ปดํฌ๋ํธ์ ๋ํด ์์๋ณด๊ฒ ๋ค.
react router์์ ํ๋ก๊ทธ๋ญ๋ฐ์ ์ผ๋ก ๊ฒฝ๋ก ์ด๋์ ํ๋ ๋ฐฉ๋ฒ์ ๋ ๊ฐ์ง๊ฐ ์๋ค.
- useNavigate
- Navigate
์ API๋ค์ ์ฐ๋ฆฌ๊ฐ ํ๋ก๊ทธ๋๋ฐ์ ์ผ๋ก ๊ฒฝ๋ก ์ด๋์ ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
์ฌ๊ธฐ์ ํ๋ก๊ทธ๋๋ฐ์ ์ด๋ผ๋ ๊ฒ์ ์ด๋ ํ ๋ก์ง์ ๊ตฌ์ฑํ๋ฉด์ ๊ฒฝ๋ก ์ด๋์ ํฌํจ์ํค๋ ๊ฒ์ด๋ค.
Link๋ NavLink์ ๊ฐ์ ์ปดํฌ๋ํธ๋ ์ง๊ด์ ์ผ๋ก ์ด๋ ํ ๊ฒฝ๋ก๋ก ์ด๋ํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ปดํฌ๋ํธ์ด๋ค.
ํ์ง๋ง useNavigate๋ Navigate๋ ์ด๋ ํ ๋ก์ง์ ๊ตฌ์ฑํ ๋ ์ฌ์ฉ์๊ฐ ์์๋ก ๊ฒฝ๋ก๋ฅผ ์ค์ ํ์ฌ ์ ๋์ ์ธ ์กฐ์์ด ๊ฐ๋ฅํ๋ค.
์๋ฅผ ๋ค์ด ,
๋ฑ์ผ๋ก ์ฌ๋ฌ๊ฐ์ง ์ํฉ์ ๋ง์ถฐ ํน์ ๊ฒฝ๋ก๋ก ์ด๋ํ๊ฒ ํ ์ ์๋ค.
userNavigate hook์ ์ํ๊ณ ์ ํ๋ ๊ฒฝ๋ก๋ก ์ด๋ํ ์ ์๊ฒ ํด์ฃผ๋ ํจ์๋ฅผ ๋ฐํํด์ค๋ค.
const navigate = useNavigate()
navigate("./home", { replace: true },{state : any});
useNavigate๋ version 6์ด์ ์ useHistory๋ฅผ ๋์ฒดํ์ฌ ๋ง๋ค์ด์ง API์ด๋ค.
React Router's imperative API for programmatically navigating.
use
useNavigate hook์ ์ํ๊ณ ์ ํ๋ ๊ฒฝ๋ก๋ก ์ด๋ํ ์ ์๊ฒ ํด์ฃผ๋ ํจ์๋ฅผ ๋ฐํํด์ค๋ค.
const navigate = useNavigate()
์ฒซ ๋ฒ์งธ ์ธ์๋ก๋ ์ด๋ํ๊ณ ์ ํ๋ ๊ฒฝ๋ก๋ฅผ ํ ๋นํด์ค๋ค.
์ธ๋ฑ์ค๋ฅผ ํ ๋นํด์ฃผ๋ฉด ์ด์ ํ์ด์ง(-1)๋ ๋ค์ ํ์ด์ง(1)๋ก ์ด๋ํ ์ ์๋ค.
navigate("/dashboard") //specific route
navigate(-1) //back
navigate(1) //next
import React from "react";
import { Outlet, useNavigate } from "react-router-dom";
const LayOut = () => {
const navigate = useNavigate();
return (
<div>
<h1>Home</h1>
<button
onClick={() => {
navigate("/dashboard");
}}
>
Submit
</button>
<button
onClick={() => {
navigate(-1);
}}
>
Prev
</button>
<button
onClick={() => {
navigate(1);
}}
>
Next
</button>
<Outlet />
</div>
);
};
export default LayOut;
submit ๋ฒํผ์ ํด๋ฆญํ๋ฉด dashboard๊ฒฝ๋ก๋ก ์ด๋ํ ์ ์๋ค.
Prev ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ด์ ๊ฒฝ๋ก๋ก, Next ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋ค์ ๊ฒฝ๋ก๋ก ์ด๋ํ ์ ์๋ค.
์ด์ ๊ฒฝ๋ก์ ๋ค์ ๊ฒฝ๋ก๋ฅผ navigate()์ ์ธ์๋ก index๋ฅผ ํ ๋นํด์ค ์ ์๋ค.
๋ฐ๋ก ์ด์ ๊ฒฝ๋ก (-1)
๋ฐ๋ก ๋ค์ ๊ฒฝ๋ก (1)
๋ ๋ฒ์งธ ์ธ์๋ ์ ํ์ ์ต์ ์ด๋ค.
๋ ๊ฐ์ง ์ต์
์ ์ฌ์ฉํ ์ ์๋๋ฐ state, replace ์ด๋ค.
{ replace?: boolean; state?: any }
navigate("/dashboard" {replace : true},{state:any})
state
Location State - A value that persists with a location that isn't encoded in the URL. Much like hash or search params (data encoded in the URL), but stored invisibly in the browser's memory. by location react router official Docs
์๋ฅผ ๋ค์ด, login > setting์ผ๋ก ์ด๋ํ์์ ๋, navigate("/setting")
์ ์ฌ์ฉํ๋ค๊ณ ๊ฐ์ ํด๋ณด์.
์ด ๋ login ํ์ด์ง์ ํน์ ๊ฐ์ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด state๋ก ์ ๋ฌํด์ค ์ ์๋ค.
navigate("/setting",{state:{id:myid,pw:mypw}})
์์ ๊ฐ์ด state๊ฐ์ ์ ๋ฌํด์ฃผ๋ฉด setting์์ location์ผ๋ก ์กฐํํ์ฌ state๊ฐ์ ์ฌ์ฉํ ์ ์๋ค.
replace
์๋ฅผ ๋ค์ด, home > dashboard > login > setting ์์ผ๋ก ํ์ด์ง ์ด๋์ ํ๋ค๊ณ ๊ฐ์ ํด๋ณด์.
์ด ๋ login ํ์ด์ง์์ setting ํ์ด์ง๋ก ์ด๋ํ๊ธฐ ์ํด์ login ์ปดํฌ๋ํธ ๋ด์์ navigate("/setting")
์ ์ฌ์ฉํ๋ค.
replace ์์ฑ์ ํ ๋นํ์ง ์์ผ๋ฉด ๋ก๊ทธ์ธ์ ํ ๋ค์ setting์์ ๋ค๋ก๊ฐ๊ธฐ๋ฅผ ๋๋ฅด๋ฉด ๋ค์ ๋ก๊ทธ์ธ ํ์ด์ง๋ก ๋์๊ฐ๋ค.
ํ์ง๋ง ๋ก๊ทธ์ธ์ ํ๊ณ ๋์ ๋ก๊ทธ์ธ ํ์ด์ง๋ก ๋์๊ฐ ํ์๊ฐ ์๋ค.
์ด๋ด ๋ loginํ์ด์ง์์ navigate("/setting",{replace:true})
์ฒ๋ผ replace๋ฅผ ํ ๋นํด์ฃผ๋ฉด ๋ก๊ทธ์ธ์ ํ๋ค์ setting ํ์ด์ง์์ ๋ค๋ก๊ฐ๊ธฐ๋ฅผ ๋๋ฌ๋ ๋ก๊ทธ์ธ ํ์ด์ง๊ฐ ์๋ ์ด์ dashboardํ์ด์ง๋ก ๋์๊ฐ๊ฒ ๋๋ค.
๋๋ฌธ์ replace ์์ฑ์ ํ์ฌ ํ์ด์ง๋ฅผ history stack์ ์์ง ์๊ณ ์ด์ ํ์ด์ง๋ก ๋์ฒดํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ฉด ๋๋ค.
Navigate ์ปดํฌ๋ํธ๋ ๋ ๋๊ฐ ๋๋ฉด ํน์ ๊ฒฝ๋ก๋ก ์ด๋ํ๊ฒ ํด์ค๋ค.
<Navigate to="/login" replace />
- React Router's declartive API for programmatically navigating.
useNavigate์ ๋ฌ๋ฆฌ ํจ์๋ก ๊ฒฝ๋ก์ด๋์ ํ๋ ๊ฒ์ด ์๋ ์ปดํฌ๋ํธ๋ก ๊ฒฝ๋ก์ด๋์ ํ๋ค.
Navigate๋ ๋ณดํต ์กฐ๊ฑด์ ๋ฐ๋ผ ํน์ ๊ฒฝ๋ก๋ก ์ด๋ํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ค.
์๋ฅผ ๋ค์ด, authed๋ผ๋ ๋ก๊ทธ์ธ ์ํ๋ฅผ ๋ํ๋ด๋ state๊ฐ ์๋ค๊ณ ํ์.
const [authed,setAuthed] = useState(false)
์ด ๋ authed๊ฐ false๋ฉด ๋ก๊ทธ์ธ ์ปดํฌ๋ํธ๋ก ์ด๋ํ๊ฒ ํ๊ณ ์ถ๋ค๊ณ ํ์.
{!authed && <Navigate to="/login"/>}
์ด๋ฌํ ์ฝ๋๋ก authed๊ฐ true๊ฐ ๋๋ฉด ํด๋น ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋๊ฒ ํ๊ณ authed๊ฐ false๋ฉด login ์ปดํฌ๋ํธ๋ก ์ด๋ํ ์ ์๊ฒ ํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
replace
useNavigate์ replace ์์ฑ์ฒ๋ผ ์ ํ์ ์ผ๋ก ํ์ํ ๋ ์ฌ์ฉํด์ฃผ๋ฉด ๋๋ค.
useNaviagte๋ imperative API์ด๊ณ Navigate๋ declartive API์ด๋ค.
Imperative? Declartive?
Imperative๋ ์ง๊ด์ ์ธ ์ฑํฅ์ด๋ค.
์กฐ๊ฑด์์ด ๊ธฐ๋ฅ์ ์คํํ ์ ์๋๋ก ํ๋ค.
Declartive๋ ์์ฌ์ ์ธ ์ฑํฅ์ด๋ค.
ํน์ ์กฐ๊ฑด์ ๋ฐ๋ผ ์ด๋ ํ ๊ธฐ๋ฅ์ ์คํํ ์ ์๋๋ก ํ๋ค.
useNavigate(Imperative) Navigate(declartive)
useNavigate๋ Imperative Navigating API์ด๋ค.
์ด ๋ง์ธ ์ฆ์จ , ํน์ ์กฐ๊ฑด ์์ด ๊ฒฝ๋ก ์ด๋์ ํ ์ ์๋ค๋ ๊ฒ์ด๋ค.
์๋ฅผ ๋ค์ด, state๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ ๋ํ์ฌ ์ด๋ํ๊ฒ ํ ์ ์์ง๋ง useNavigate๋ state๋ฅผ ์ฐ์ง ์๊ณ ๋ ๊ธฐ๋ฅ์ ์คํํ ์ ์๋ค.
Navigate๋ Declartive navigating API์ด๋ค.
์ด๋ ํน์ ์กฐ๊ฑด์ ๊ธฐ์ค์ผ๋ก ๊ธฐ๋ฅ์ ์คํํ ์ ์๋๋ก ํ๋ค.
Declartive๋ React๊ฐ ์ฃผ์ฅํ๋ ํต์ฌ ์๋ฆฌ ์ค ํ๋์ด๋ค.
React will efficiently update and render just the right components when your data changes
- ๋ฆฌ์กํธ๋ data๊ฐ ๋ฐ๋์ ๋ฐ๋ผ ์ปดํฌ๋ํธ๋ฅผ ์ ๋ฐ์ดํธํด์ค๋ค.
Declarative views make your code more predictable and easier to debug.
- Declarative view๋ ์ฝ๋๋ฅผ ์์ธก๊ฐ๋ฅํ๊ณ ์ค๋ฅ๋ฅผ ์ก์๋ด๊ธฐ ์ฝ๊ฒ ํด์ค๋ค.
React๋ state๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ฌ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋ํด์ค๋ค.
React router์ Navigate๋ React์ ์์น์ฒ๋ผ Declartiveํ๊ฒ ์ฆ, state ๋ณํ์ ๋ฐ๋ผ Navigate๋ฅผ ๋ ๋ํด์ค ์ ์๊ฒ ํ๋ค.
React์์ state๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํด์ฃผ๋ ๊ฒ์ฒ๋ผ Navigate๋ state๋ฅผ ๊ธฐ์ค์ผ๋ก Navigate๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด๋ค.
(๋ฐ๋์ ๊ทธ๋ฐ ๊ฒ์ด ์๋๋ผ ๊ทธ๋ฌํ ๋ก์ง์ผ๋ก ๊ตฌ์ฑํ๋ ๊ฒ)
๋ฆฌ์กํธ์์ ์ ์ํ๋ ์ด์ ์ฒ๋ผ ์ด๋ ํ ์ํ์ ๋ฐ๋ผ ์ปดํฌ๋ํธ๋ฅผ ์ ๋ฐ์ดํธ ํด์ค๋ค๋ ๊ฒ์ ์ฝ๋๊ฐ ๋ ผ๋ฆฌ๊ฐ ์๊ณ ์ถ์ ํ๊ธฐ๊ฐ ์ฝ๋ค๋ผ๋ ๊ฒ์ ์๊ธฐํ๋ ๊ฒ ๊ฐ๋ค.
useNavigate๋ ์ด๋ ํ ์ด๋ฒคํธ๋ฅผ ๋ฐ์์์ผฐ์ ๋๋ผ๋์ง ๋ฑ ์ด๋ ํ ๊ธฐ๋ฅ์ ๋ฐ์์์ผฐ์ ๋ ์ฌ์ฉํ๊ณ ,Navigate๋ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๊ฐ ๋ฌ์ ๋ ๊ฒฝ๋ก ์ด๋์ ํ๊ณ ์ถ์ผ๋ฉด ์ฌ์ฉํ๋ฉด ๋๋ค.
์ฝ๋ ๋ฌธ๋งฅ์ ๋ฐ๋ผ ๋ ์ค์ ๊ณจ๋ผ ์ฌ์ฉํ๋ฉด ๋ ๊ฒ ๊ฐ๋ค.
์กฐ๊ธ ๋ ์ง๊ด์ ์ผ๋ก ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด useNavigate Hook์ , React์ค๋ฝ๊ฒ navigatingํ๊ณ ์ถ๋ค๋ฉด Navigate ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๊ฒ ๋ค.
์ฐธ์กฐ : How to Programmatically Navigate with React Router
The useLocation() hook provides us access to the browser's location object.
- useLocation hook์ location object์ ์ ๊ทผํ๊ฒ ํด์ค๋ค.
location object
๋ ๋ฌด์์ผ๊น?
- The browser has a location object on window.location. It tells you information about the URL but also has some methods to change it:
- This is a React Router specific object that is based on the built-in browser's window.location object.
It represents "where the user is at". It's mostly an object representation of the URL but has a bit more to it than that.
by location react router official Docs
location object๋ window.location์ ๊ธฐ๋ฐ์ผ๋ก ํ ๊ฐ์ฒด์ด๋ฉฐ url์ ๋ํ ์ ๋ณด๋ฟ๋ง ์๋๋ผ ๋ณ๊ฒฝํ ์ ์๋ ๋ฉ์๋ ๋ฑ์ ๊ธฐ๋ฅ๋ค์ ๊ฐ์ง๊ณ ์๋ ๊ฐ์ฒด์ด๋ค.
window.location์ react router์์ ์ฌ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์ ์ด๋ฅผ ๋ ๊ฐํธํ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก location API๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋ค.
location object๋ ๋ค์๊ณผ ๊ฐ์ ํํ๋ฅผ ๋๊ณ ์๋ค.
location object
{
pathname: "/bbq/pig-pickins",
search: "?campaign=instagram",
hash: "#menu",
state: null,
key: "aefz24ie"
}
{ pathname, search, hash }์ window.location์ ๊ธฐ๋ฅ๊ณผ ๋๊ฐ๋ค.
์ธ ๊ฐ์ง ๊ธฐ๋ฅ์ ์กฐํํ๋ฉด URL์ ๋ํ ์ ๋ณด๋ฅผ ์ป์ ์ ์๋ค.
{state, key}๋ ํน์ํ๋ค.
pathname
URL์ ๊ธฐ๋ณธ ๊ฒฝ๋ก ๋ค์ ์ค๋ ์ฃผ์์ด๋ค.
https://example.com/teams/hotspurs
๋ผ๋ URL์ด ์์ ๋ /teams/hotspurs
๊ฐ pathname์ด๋ค.
search
location.search
, search params
,URL search params
, query string
์ผ๋ก ๋ค์ํ ์ฉ์ด๋ก ์ฌ์ฉ๋๋ค.
react router์์๋ location.search๋ก ์ฌ์ฉ๋๋ค.
URL ๋ค์ query๋ฅผ ๊ฐ์ ธ์ฌ ๋ ์ฌ์ฉ๋๋ค.
https://example.com/teams/hotspurs?campaign=instagram
์์
query => ?campaign=instagram
hash
์๋ฒ์ ์์ฒญํ์ง ์๊ณ URL์ ์กฐ์ํ ์ ์๋ ๋ถ๋ถ์ด์ง๋ง ์ค๋๋ ์ ์ํ๋ ์คํฌ๋กค ์์น๋ก ๋ณด๋ด๋ ๋ฑ ๋์์ธ ์ ์ธ ์์๋ก ๋ง์ด ์ฌ์ฉํ๊ณ ์๋ค.
https://example.com/#hash
=>#hash
state
state๋ ํด๋น location์ ๋ค์ด๊ฐ์ ๋์ ์ํ๊ฐ์ ๋งํ๋ค.
์ด๋ ๋ณธ๋ history.state
๋ก ์ค์ ๋ฐ ์กฐํํ์ง๋ง react router์์ ํด๋น ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค.
๋๋ฌธ์ react router์์๋ state๋ฅผ location object์์ ์กฐํํ ์ ์๋๋ก ํ๋ค.
state๋ url์ ํ์๋์ง์์ url์ ๋ํ ์ ๋ณด๋ฅผ ๋ณด์์ ์ผ๋ก ๊ณต์ ํ ์ ์๋ค.
state๋ ์ฃผ๋ก ๋ค์ ๊ฒฝ๋ก๋ก ์ด๋ํ์์ ๋ ์ด์ ๊ฒฝ๋ก์ data๋ฅผ ์ ๋ฌํ ๊ฒฝ์ฐ์ ๋ง์ด ์ฐ์ธ๋ค.
state๋ Link๋ navigate(from useNavigate)์์ ์ฌ์ฉ๋๋ค.
<Link to="/pins/123" state={{ fromDashboard: true }} />;
let navigate = useNavigate();
navigate("/users/123", { state: partialUser });
๊ทธ๋ฆฌ๊ณ ๋ค์ ํ์ด์ง์์ ํด๋น state๋ฅผ ์กฐํํ ์ ์๋ค.
let location = useLocation();
location.state;
key
๊ฐ ํ์ด์ง location์ ๊ณ ์ ํ key๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
๋ฐ๋ผ์ ์์ ๊ฐ์ location ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉํ๊ธฐ ์ํด์ useLocation hook์ ์ฌ์ฉํ๋ฉด ๋๋ค.
useLocation์ ํด๋น ํ์ด์ง์ ๋ํ location ๊ฐ์ฒด๋ฅผ ๋ถ๋ฌ์์ค๋ค.
const location = useLocation
์์์ ๋ดค๋ ๊ฒ๊ณผ ๊ฐ์ด location์ ์กฐํํ์ฌ ์ฌ๋ฌ ๊ฐ์ง ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉํ ์ ์๋ค.