Next.js 이전 페이지 링크 저장 & 라우터 이동 멋지게

보통 프론트엔드 작업을 하면 컴포넌트를 많이 재활용합니다.

대표적으로 header컴포넌트를 예로 들 수 있습니다.

이번에 작업하면서 아래와 같은 컴포넌트를 재활용하면서 사용했습니다.

backButton에는 원하는 컴포넌트에서 원하는 onClick이벤트를 전달할 수 있도록 구현했습니다.

근데 하나의 컴포넌트 page를 여러 경로로 접근하는 경우도 있습니다.

예를 들면

A page -> C component

B page -> C component

이런 경우에는 C component에서 원하는 backButton onClick 이벤트가 어느 경로에서 접근했는지에 따라 달라집니다.

A page에서 접근한 경우에는 A page로 보내고 싶고

B page에서 접근한 경우에는 B page로 보내고 싶습니다.

하지만 현재 제 컴포넌트는 onClick={()=> push('/')} 이런 식으로 작성되어 있어서 로직을 분기할 수 없습니다.

 

이런 경우에는 직전에 어떤 라우터에서 접근했는지 기억하는 기능이 필요합니다.

세션스토리지를 이용하기로 했습니다.

useRouter의 asPath가 바뀔 때마다 storePrevPath라는 함수를 호출합니다.

함수는 블로그 참고, https://www.grouparoo.com/blog/getting-previous-path-nextjs

세션스토리지를 불러와서 asPath가 바뀔 때마다(url이 바뀔 때마다) 이전의 currentPath를 prevPath라는 키에 넣고

현재 pathname은 currentPath키에 업데이트합니다.

그리고 asPath가 바뀌면 또다시 함수가 호출되며,

이전의 currentPath가 prevPath에 들어가고 currentPath는 다시 업데이트됩니다.

 

블로그를 보고 이렇게 작성했는데 쿼리 스트링이 변화까지 업데이트가 되더군요.

저는 쿼리 스트링의 변화는 무시하고 싶었습니다.

그래서 useRouter에서 어떤 값을 사용할 수 있을지 찾아보았습니다.

pathname을 사용하면 page의 변화만 추적함으로써 쿼리스트링의 변화는 무시할 수 있겠네요.

세션스토리지에 원하던 값을 가져옵니다.

이제 backButton의 onClick이벤트에 세션스토리지를 가져와서 if문 내에 로직을 다르게 작성해주면 되겠습니다.

위에 storePrevPath 함수에 globalThis라는 게 있습니다.

콘솔에 globalThis를 찍어보니 window객체가 나오더라고요. 그리고 globalThis === window의 결과는 true입니다.

브라우저에서 globalThis는 전역 객체인 window를 가리킵니다. 그래서 저는 window로 코드를 수정했습니다.

 

그러나 globalThis는 전역 객체와 동일하지 않습니다. globalThis는 전역 스코프의 this를 반환합니다.

전역 실행컨텍스트의 this에 바인딩된 전역 객체에 대한 참조라고 해요.

프론트엔드 코드를 작성할 땐 window를 가져올테고, nodeJS로 백엔드 코드를 작성할땐 global객체를 가져올 텐데

언제 globalThis를 사용하게 될지는 아직 잘 모르겠습니다. 

그리고 전역스코프, this개념도 면접 준비 이후로 공부하지 않아서 한 번에 와닿지가 않네요 ㅠㅠ

부족함을 많이 느낀 하루였습니다.

 

 

 

 

 

https://www.grouparoo.com/blog/getting-previous-path-nextjs

Get user's Previous Path with NextJS Router