react์์ navigate ์ฌ์ฉ (useNavigate)
Link๋ ํน์ ์ฃผ์๋ก ์ด๋ํด์ฃผ๋ ํ๊ทธ, Navigate๋ ํน์ ํ๋ ์ํ์ ํด๋น ์ฃผ์๋ก ์ด๋ํ ์์๊ฒ ํด์ค๋ค.
- useNavigate ์ฌ์ฉ
useNavigate๋ ์์ ์ ์ถ ํน์ ํน์ event ๋ฐ์์ url ์กฐ์ํ ์ ์๋ interface ์ ๊ณต
- useNavigate ์ธ์
์ฒซ๋ฒ์งธ ์ธ์๋ก๋ ์ฃผ์๋ฅผ ๋ฐ๊ณ , ๋๋ฒ์งธ ์ธ์๋ก {replace : state} ์ธ์๋ฅผ ์ฌ์ฉํ๋ค.- replace(true or false)
- true : nav์ ์ ํ ์ฃผ์๋ก ๋์ด๊ฐ ํ ๋ค๋ก๊ฐ๊ธฐ ํด๋ ๋ฐฉ๊ธ ํ์ด์ง๋ก ๋์์ค์ง ์์. ์์ ์ ๋ฉ์ธ ํ์ด์ง๋ก ๋์์ค๊ฒ ๋จ.
- false : ๋ค๋ก๊ฐ๊ธฐ ๊ฐ๋ฅ
- true : nav์ ์ ํ ์ฃผ์๋ก ๋์ด๊ฐ ํ ๋ค๋ก๊ฐ๊ธฐ ํด๋ ๋ฐฉ๊ธ ํ์ด์ง๋ก ๋์์ค์ง ์์. ์์ ์ ๋ฉ์ธ ํ์ด์ง๋ก ๋์์ค๊ฒ ๋จ.
- replace(true or false)
- 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>
</>
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(react์์ navigate ์ฌ์ฉ (useNavigate)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@2da1/react์์-navigate-์ฌ์ฉ-useNavigate์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค