useParams
-
- [React.js] URL์ ํ๋ฆฌ๋ฏธํฐ(Parameter) ๊ฐ ๊ฐ์ ธ์ค๊ธฐ
URL์ ํ๋ฆฌ๋ฏธํฐ(Parameter) ๊ฐ ๊ฐ์ ธ์ค๊ธฐ๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ URL์ ํ๋ผ๋ฏธํฐ(Parameter) ๊ฐ์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ ์ ๋ฆฌํด๋ณธ๋ค. ํ๋ผ๋ฏธํฐ(Parameter)๊ฐ๋ URL ๊ฒฝ๋ก์ ์ผ๋ถ๋ถ์ผ๋ก, ์ฃผ๋ก ํน์ ๋ฆฌ์์ค๋ฅผ ์๋ณํ๋ ๋ฐ ์ฌ์ฉ๋๋ค.RESTful API ์ค๊ณ์์ ํํ ์ฌ์ฉ๋๋ฉฐ, ๋ฆฌ์์ค์ ๊ณ ์ ์๋ณ์๋ฅผ ๋ํ๋ธ๋ค.URL ํ๋ผ๋ฏธํฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๋์ ์ธ ๊ฒฝ๋ก๋ฅผ ์์ฑํ ์ ์์ด, ๋ค์ํ ๋ฆฌ์์ค์ ๋ํด ๋์ผํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉํ ์ ์๋ค. ์ข ๋ฅ์ข ๋ฅ์ค๋ช ๊ฒฝ๋ก ํ๋ผ๋ฏธํฐ(Path Parameter)- ํน์ ๋ฆฌ์์ค๋ฅผ ์๋ณํ๋ ๋ฐ ์ฌ์ฉ- ์: @/users/:userId@์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ(Query Parameter)- URL์ @?@ ๋ค์ ์์นํ๋ฉฐ, @ํค-๊ฐ@ ์์ผ๋ก ๋ค์ํ ์ต์ ์ ์ ๋ฌํ๋ค.- ์) @?sea..
1 2024.10.02 -
- [React.js] ๋ผ์ฐํ ๊ด๋ จ ๊ธฐ๋ฅ๋ค ์ ๋ฆฌ (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate
๋ผ์ฐํ ๊ด๋ จ ๊ธฐ๋ฅ๋ค ์ ๋ฆฌ (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React.js)์์ ๋ผ์ฐํ ์ ์ํด ์ฌ์ฉ๋๋ ๊ด๋ จ ๊ธฐ๋ฅ๋ค์ ๋ํด ๊ฐ๋จํ๊ฒ ์ ๋ฆฌํด๋ณธ๋ค.ํ์ด์ง ์ด๋ ๋ฐ ๋ผ์ฐํ ์ ์ํด ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router)์ ์ฌ๋ฌ ํ ๊ณผ ์ปดํฌ๋ํธ, ํจ์๋ค์ ์ฌ์ฉํ ์ ์๋ค. โ useNavigate()๊ฐ๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ(React Router) v6 ์์ ์ ๊ณตํ๋ ํ ํ๋ก๊ทธ๋๋ฐ์ ์ผ๋ก ๋ค๋ฅธ ๊ฒฝ๋ก๋ก ์ด๋ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.์ปดํฌ๋ํธ ๋ด์์ ๋ฒํผ ํด๋ฆญ, ์ด๋ฒคํธ ๋ฐ์ ์ ํน์ ํ์ด์ง๋ก ์ด๋ํ ๋ ์ฌ์ฉํ๋ค. ํน์ง@push@์ @replace@๋ฅผ ์ค์ ํ ์ ์์ด ํ์คํ ๋ฆฌ์ ์ถ๊ฐ..
1 2024.09.26