개발자
흰색 배경의 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 값을 할당하는게 아니라, 두가지를 모두 동시에 바꾸는게 더 좋은 방법이 맞는건지 궁금합니다.
답변 1
먼저 순번이 중요한지가 관점이겠내요 useState의 경우 비동기이며 예를 들어 버튼의 색이 바뀌고 url이 변경되어야 할 경우 두 기능을 순차적으로 연결하여 작업하는게 맞습니다. 다만 색을 바꾸고 url이 변경된다면 해당 페이지는 다시 랜더링이 들어가게 되고 색정보는 전역변수 등을 통해 관리해야 할 것 같습니다. 역으로 url이 바뀌고 색이 바껴야 한다면 특정 url의 param이나 query를 받아오는 버튼을 만들어 그 변수에 따라 버튼을 조작하면 될 것 같습니다. url이 변경되어 새로 랜더링 되야 한다면 굳이 버튼의 색을 클릭시 관리하는 게 아닌 랜더링 시 반영하면 될 것 같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 01월 30일
네, 그 부분에 대해서는 대부분의 경우 개발자의 선택에 따라 다르다고 할 수 있습니다. 사실 URL만 변경하고 그 URL을 통해 버튼 상태를 관리하는 방법이 맞습니다. 이렇게 하면 사용자가 브라우저의 뒤로 가기, 앞으로 가기 버튼을 클릭했을때도 올바른 버튼 상태를 유지할 수 있습니다. 또한 이 방식은 구글 등의 검색 엔진이 페이지를 크롤링할때도 페이지의 정확한 상태를 인식하는데 도움이 됩니다. 그러나 언급하신대로 이 방식의 단점은 페이지에 즉각적인 반응성이 떨어질 수 있다는 것입니다. URL 변경 후 스테이트가 업데이트되기까지 약간의 지연 시간이 생깁니다. 추가적으로 URL을 통해 스테이트를 관리하려면 로직이 복잡해지거나 추가적인 라이브러리가 필요할 수 있습니다. 따라서 실시간 반응성을 중요시 하는 사이트에서는 유저의 인터랙션에 신속하게 반응하기 위해 동시에 스테이트와 URL을 변경하는 경향도 있습니다. 결국 이 부분은 상황과 요구사항에 따라 조정이 필요하며, 어느 방법이 더 나은지는 명확하게 답하기 어렵습니다. 이용자 경험, 코드의 복잡성, SEO 등 여러 가지를 고려하여 결정해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!