리액트 useLocation(), pathname 한글 깨짐

한글이 포함됀 현재 url값 얻기 = decodeURI(window.location.pathname)

회사에서 소셜로그인을 할때 callbackUrl을 localStorage에 담아두고 리다이렉트 할때 가져와서 리 렌더링을 하는 과정에서 벌어진 문제가 있었습니다..

useLocation의 렌더링 문제

useLocation().pathname으로 쉽게 해결되는듯 보였으나 문제는 console을 찍어보니 라우터가 변경 될때마다 한번씩 렌더링이 되는거였습니다 (나는 패스명만 가져오면 되는데..?)

검색을 하다보니 useContext로 만들어져 location값이 변경될때마다 React.memo를 사용해도 렌더링이 일어나는 것이였다....
출처 - https://velog.io/@eye3570/React-Router-%EC%99%9C-useLocation%EC%9D%80-render%EB%A5%BC-%EC%9D%BC%EC%9C%BC%ED%82%AC%EA%B9%8C

최초 마운트한번만 되면 끝나야하는 컴포넌트가 렌더링 되니 분명 성능저하 + 불필요한 렌더라고 생각해 다른방법을 찾아보았다

최종.. window.location.pathname

자바스크립트 문법인데 현재window의 패스명을 가져오는데 문제는 한글이 또 깨지는것 이였다...

자동으로 인코딩됀 결과값
내가 필요한 url은 한글이 포함돼 이방법으론 안되는가 했는데 역시 안되는것은 없었다^^..

진짜최종.. decodeURI(window.location.pathname)

url을 인코딩, 디코딩해주는 함수가 있었다... 이것으로 최종 문제를 해결했다

결국 리액트를 쓰던 뷰를쓰던 자바스크립트가 기본이니 기본기를 닦는게 중요하다는걸 새삼 또 느끼는 하루네요💧