React에서 정렬 또는 필터에 따라서 Query Parameter를 변경하는 방식과 useState를 변경하는 방식의 장단점이 궁금합니다

Question

정렬 또는 필터링을 구현할 때 React를 예로들어 웹사이트의 Query Parameters를 변경하고 받아와서 만드는 방식과 useState로 url을 변경하지 않고 만드는 방식 둘중에 선택해야한다면 어떤 방식이 더 좋고 그 이유를 알 수 있을까요?..

API 요청은 동일하고 URL을 변경하지 않느냐 변경하느냐 어떤게 더 옳은것인가?... 그런 부분이 궁금합니다

예를들어 정렬화면을 보여줄때
/?sort=ASC 또는 /?sort=DSC로 하고 url의 sort 값을 불러오고 url을 변경하는 방식과
const [sort, setSort] = useState(ASC)로 useState의 값을 변경하는 방식
이 두가지 중 어떤 방법이 더 선호되야하고 그 이유가 궁금했습니다

권민수 · Answer

useState만을 사용하는 경우 자바스크립트의 영역이기 때문에 URL에 변경사항이 전이되지 않고, 새로고침과 같은 액션이 발생하는 경우 상태가 초기값으로 리셋되게 됩니다. 또한 다음과 같은 상황이 있을 수도 있어요 : 사용자 A가 페이지를 탐색하다가 현재 보고 있는 화면을 똑같이 사용자 B에게 공유하고 싶어서 주소를 복사해서 공유해줬을때, 사용자 B는 필터가 적용되지 않은 초기 상태의 페이지를 보게됩니다. 당황스러울 수 있겠죠?

URL에 상태변화가 sync 된다면 위와 같이 새로고침/주소 공유시에도 같은 화면을 볼 수 있게 되기도하고, url history replace가 아닌 push를 하게 되는 경우 브라우저의 히스토리에 필터 적용/미적용 변경상태를 남겨 뒤로가기/앞으로가기 경험을 개선시킬 수도 있습니다. 필터 적용/미적용 상태가 URL에 포함되기 때문에 SEO 측면에서도 도움이 될 가능성이 높구요.

하지만 이런 부분들이 그렇게 중요하지 않고, 단순히 빠르게 개발해야하는 부분이라면 꼭 URL sync를 맞춰줘야하는건 아닙니다. 유즈케이스에 따라서 결정하시면 될 것 같아요.