인프런 커뮤니티 질문&답변

j44s11님의 프로필 이미지
j44s11

작성한 질문수

Next + React Query로 SNS 서비스 만들기

url을 통한 반응과 state를 이용한 반응 차이 관련 질문

작성

·

128

·

수정됨

0

수업을 진행하다가 그 당시에도 궁금즘이 생겨 개인적으로 알아봤던 부분인데, 확신이 안가서 강사님께 여쭈어봅니다. 수업 내용에서는 정확한 위치가 기억이 나지 않아서 다른 예시로 대체하겠습니다.

 

흰색 배경의 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

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

저는 url을 먼저 변경시키고, url을 읽어서 버튼에 state를 주는 걸 더 선호합니다.

이유는 새로고침을 할 경우를 가정하면 간단합니다.

어차피 새로고침을 하는 경우는 처음 버튼 state가 없으므로 주소를 읽어서 버튼에 state를 주어야 합니다. 주소를 기준으로 ui의 state를 정하는 게 좋은 것 같습니다. remix도 이러한 방식을 취합니다.

url을 바꾸고 그 값을 통해 button의 상태 관리를 다시 하는건 즉각적인 반응이 아니고

라고 보셨다고 하셨는데 저도 이게 왜 즉각적인 반응이 아닌지 모르겠습니다.

j44s11님의 프로필 이미지
j44s11

작성한 질문수

질문하기