popstate

 if (typeof window !== 'undefined') {
      window.addEventListener('popstate', () => {
        const params = new URLSearchParams(window.location.search);
        const newTab = params.get('ctegrySid');
        if (newTab) setTab(Number(newTab));
      });
 }

popstate

이벤트는 웹 브라우저의 히스토리 스택에서 상태가 변경될 때 발생하는 이벤트입니다. 이 이벤트는 주로 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 사용하여 페이지를 탐색하거나 JavaScript를 사용하여 브라우저 히스토리를 조작할 때 유용하게 활용됩니다.

popstate 이벤트 핸들러는 브라우저의 히스토리 스택에서 페이지 전환으로 인한 상태 변경을 감지할 수 있습니다. 예를 들어, 브라우저의 뒤로 가기 버튼을 클릭하면 popstate 이벤트가 트리거되고, 개발자는 이 이벤트를 사용하여 페이지 내용을 업데이트하거나 다른 작업을 수행할 수 있습니다.

위의 코드는 popstate 이벤트를 사용하여 현재 URL의 쿼리 매개변수 중에서 'ctegrySid' 매개변수의 값을 읽어와서 이 값을 'setTab' 함수에 전달하는 예제입니다. 이렇게 하면 페이지가 뒤로 가기 또는 앞으로 가기로 변경될 때 'ctegrySid' 매개변수의 값에 따라 해당 탭을 설정할 수 있습니다.

❗️ tab을 통해 움직이는 동작을 구현하는데 뒤로가기 히스토리에 따라서 tab과 관련된 UI가 함께 수정될 수 있도록 popstate를 활용하여 코드를 작성하였다