Url to state or url and state

Question

흰색 배경의 button group이 있고 각각의 button은 클릭할 시 url을 변경시킵니다. 또한 현재 선택된 button은 색상이 칠해집니다.

이러한 상황에서 useState를 통해서 button의 state를 관리하고 있었고, button을 클릭했을때
1. setState를 통해 button의 값을 변경함
2. router을 통해 url 경로를 변경함

이렇게 두가지 액션을 취했었습니다.

그 때 생겼던 궁금중은 어차피 url과 button은 mapping 할 수 있으니까, 버튼을 클릭하면 url만 변경시키고, url을 읽어서 button에 다시 값을 주면 기능적으로 똑같지 않나? 그러면 하나의 액션으로 기존의 두가지 액션을 대체할 수 있지 않나? 라고 생각했습니다.

그래서 조금 찾아보니까 url을 바꾸고 그 값을 통해 button의 상태 관리를 다시 하는건 즉각적인 반응이 아니고, 영상에서 봤던 것 처럼 url과 button state를 각각 바꾸는게 더 인터랙티브하다 라는 글을 읽었습니다. (신빙성이 있는 글은 아닙니다.) 실제로 이러한 이유 때문에 url만 바꾸고, 그 값을 받아와 button 값을 할당하는게 아니라, 두가지를 모두 동시에 바꾸는게 더 좋은 방법이 맞는건지 궁금합니다.

백승훈 · Answer

먼저 순번이 중요한지가 관점이겠내요 useState의 경우 비동기이며 예를 들어 버튼의 색이 바뀌고 url이 변경되어야 할 경우 두 기능을 순차적으로 연결하여 작업하는게 맞습니다. 다만 색을 바꾸고 url이 변경된다면 해당 페이지는 다시 랜더링이 들어가게 되고 색정보는 전역변수 등을 통해 관리해야 할 것 같습니다.

역으로 url이 바뀌고 색이 바껴야 한다면 특정 url의 param이나 query를 받아오는 버튼을 만들어 그 변수에 따라 버튼을 조작하면 될 것 같습니다. url이 변경되어 새로 랜더링 되야 한다면 굳이 버튼의 색을 클릭시 관리하는 게 아닌 랜더링 시  반영하면 될 것 같습니다.