🌀 조금 복잡한 라우팅

지금까지는 react-router-dom을 사용하면서 그저 페이지를 지정해주고
그 페이지로 이동하는 작업만을 했었는데,
history에 어떤 데이터를 쌓거나, 덮어씌우는 작업도 할 수 있는걸 알게 되었다.
그 중에서 history의 메서드인 push와 replace를 알아보자 😎
(간단하게 go도 정리해보자)

history

history는 자바스크립트 환경에서 히스토리 세션을 관리하는 도구이며
stack으로 쌓이게 된다.

react-router-dom에서의 history는 라우트로 사용된 컴포넌트에게
match, location 과 함께 전달되는 props 중 하나이다.
그 중에 go, push, replace 메소드에 대해 정리해보자.

history.go

단순하게 어느 시점으로의 이동을 할 때 사용한다.
history.go() 안에 숫자나 url을 넣어서 사용한다.

• go(1) = goForward()
• go(-1) = goBack()

history.push

When using the router.push, it adds a new route to the top of the stack.

위처럼, push는 stack을 history 제일 위에 쌓는 것이다.
history.push()안에는 이동하고자 하는 path경로를 넣어주게 되면
이전 history위에 쌓이게 된다.

예를 들어 경로 이동을
Home ➡️ Profile ➡️ Login
순서로 이동한다고 했을 때, history.push("/Profile")을 날리면
Home ➡️ Profile ➡️ Login ➡️ Profile
순서로 쌓이게 된다.

history.replace

When you use the router.replace, you're overwritting the top of the the stack.

replace는 history 제일 위에 있는 원소를 덮어씌우는 것이다.

예를 들어 경로 이동을
Home ➡️ Profile ➡️ Login
순서로 이동한다고 했을 때, history.replace("/Profile")을 날리면
맨 위에 있는 Login을 날려버리고, 새로 날라온 Profile로 덮어씌운다.
Home ➡️ Profile ➡️ Profile
순서로 바뀌게 된다.

router에서는 히스토리를 남기기 위해서 push를 사용하는 것이 좋다.
대부분 replace를 사용하는 경우는 정해져있다.
replace는 이전에 쌓인 히스토리를 덮어씌우기 때문에
히스토리를 남기지 않기 위한 작업에서 사용하는 것이 좋다.
(예를 들면, 잘못된 경로로 접근하려 하는 경우나, login 한 유저가 다시 login 창으로 접근하려 할 때 등등)

다음포스팅에서는 typescript에서 history를 사용하기 위해 쓰이는 hook인 useHistory에 대해서도 정리해볼 예정!

참고하였습니다 :)

• https://darrengwon.tistory.com/581
• https://react.vlpt.us/react-router/04-extra.html