개념 - React Router2

용어 정리

Path Variable - 경로 변수, url에 있는 숫자 번호들
ex) /diary/1 , /diary/2
useParams로 관리

QueryString - ? 키워드 뒤에있는것 가져옴
ex) /edit?id=10&mode=dark
useSearchParams로 관리

useParams

링크 뒤쪽에 id 같은것을 자동으로 찾아준다. 만약 현재 나의 링크를 /velog 라고 한다. 그리고 1번째 게시물을 만들었을 때에는 /velog/1 2번째 게시물은 /velog/2 라고 하자. 여기 이 번호들을 useParams로 관리할 수 있다.

이 번호들을 Path Variable 이라고 한다.

사용방법

먼저 Route의 경로에 /:id를 넣어준다.

<Route path="/diary/:id" element={<diary/>}>

그리고 그 경로인 < diary > 컴포넌트로 들어가 useParams를 설정해준다.

const {id} = useParams() // 전달받는 Path Variable들을 모아서 객체로 갖다줌. 그래서 객체의 이름인 id로 꺼내온다. 

useSearchParams

QueryString을 찾아준다. 예를 들어 url이 /edit?id=10&mode=dark가 있다면 id의 값은 10이고 mode의 값은 dark인 것 이다. &연산자로 이어줄 수 있다.

사용방법

먼저 선언을 한다.

const [searchParams, setSearchParams] = useSearchParams()

그리고 각각의 가져올 값을 get을 이용해 가져오고 변수에 담는다

const id = searchParams.get("id") // 10
const mode = searchParams.get("mode") // dark

setSearchParams는 url의 ? 뒤에 있는 값을 바꿔준다. 그런 버튼을 만들어 보겠다

<button onClick={()=>setSearchParams({who : "codemodel"})}>QS 바꾸기</button>
// 버튼을 누르면 QueryString이 /edit?who=codemodel 로 바뀐다

useNavigate

Link처럼 특정한 url로 이동할 수 있게 해주는 hooks이다.

사용방법

먼저 선언을 한다

const navigate = useNavigate()

그리고 버튼을 만들어 보겠다

<button onClick={()=>{navigate("/home")}}>HOME으로 가기</button>
// /home 으로 이동한다

링크 부분에 -1을 넣으면 뒤로가기 버튼도 만들 수 있다.

<button onClick={()=>{navigate(-1)}}>뒤로 가기</button>
// 뒤로 한칸 이동