🚒 1. 발단
코드를 짜던 중, routing을 하지만 내부 상태는 변화하지 않고 url만 변경해야 하는 상황이 생겼다.
정확하게 말하자면, 아래와 같은 상황이었다.
처음에는 각 상세페이지에서 useQuery를 통해 해당 데이터를 호출하여 랜더링을 하는 구조였으나,
각 상세페이지에 존재하는 "Prev", "Next" 버튼을 눌렀을 때, 다음 상세페이지 데이터를 또다시 호출하는 상황보다는 처음에 한번에 데이터를 불러오고 거기에서 이동하도록 하는 방식으로 전환해주기를 요구하였기에 Redux에 필요한 데이터를 저장하는 방식을 취하도록 하였다.
하지만, 해당 방법에는 문제가 존재하였는데, 그것은 사용자가 "F5"와 같이 버튼을 눌러 페이지를 새로고침을 했을 경우, Redux의 데이터가 다 날아간다는 단점이 존재하였던 것이다.
🚒 2. 해결방안
이에 따라, 기존에 사용해봤던 Redux Persist를 이용해서 State를 Local Storage에 저장하여 관리하는 방식을 택해볼까 하였지만, 굳이 불필요하게 모든 Redux 데이터를 사용자의 local에 남겨두게 하는 것은 조금 꺼려지는 일이었다.
그래서 새로고침이 일어나도 유지되는 URL의 값을 이용해서 첫 초기에 새로고침을 할 때에만 Redux Store 데이터를 업데이트하고, 그 이후로부터는 그 store 데이터를 활용해서 상세페이지끼리 이동할 수 있도록 변경하였다.
다만, 그렇게 되면 또다른 문제가 발생하게 되었는데, 그것은 "Prev","Next" 버튼을 누르더라도 URL의 값이 변경되지 않기 때문에 만약 버튼을 눌러 다른 상세페이지로 이동했다가 새로고침을 했을 경우, 상단의 URL을 기준으로 아이템이 랜더링되어 초기 랜더링 페이를 보여주게 되는 문제가 발생하였다.
그래서 URL은 변경되더라도 안의 내부 상세페이지 State는 변경되지 않을 방법을 찾다가 공식문서에서 Shallow 옵션을 발견하게 되었다.
공식 문서에 써져있는 설명이다. 내부의 useEffect 내용을 보면, router.push() 하고 내부 arguments들을 확인할 수 있다.
첫번째는 "path"이다. 이것은 말 그대로 라우팅을 할 때에 사용될 데이터의 기준이 된다.
두번째는 "as" 이다. 현재는 undefined로 되어있는데, 이 부분은 실제 url 부분에 나타나게 될 string 값을 의미한다. 나는 사용하지 않을 것이기 때문에 undefined로 남겨두었다.
세번째는 "config" 이다. 여기서 라우팅에 대한 다양한 옵션들을 설정할 수 있는데 위에 보이는 shallow 옵션이 바로 라우팅을 하더라도 url만 바뀌도록 만들어 주는 역할을 한다.
위의 내용에 따라 prev와 next 버튼에서 사용할 공용 hanlder 함수를 작성하였다.
이를 이용하였더니 정말로 url만 바뀌고 새로고침이 일어나지 않는 것을 확인할 수 있었다.
