useMemo내에서 사용되는 window.location.search 를 deps에서 제외한 이유

아 그러네요. query parameter를 따로 상태로 둬야겠군요.

리렌더링을 트리거하지않으면 deps에 넣어두는게 의미없 수 있겠네요. React router dom library에서 어떻게쓰는지 확인해보겠습니다

예제에서 구현한 MyRouter는 경로(path)만 상태로 관리했습니다. Router 컴포넌트가 이 상태를 관리하고 있고 컨택스트를 통해 각 컴포넌트들에게 전달하는 구조인데요. 이들 컴포넌트 중에서 상태 변경 함수를 실행해 경로값을 바꾸면 Router 컴포넌트와 하위의 소비자 컴포넌트들이 다시 렌더링 되면서 페이지가 전환됩니다.

하지만 쿼리문자열은 그렇지 않습니다. 브라우져 주소창에만 변경될 뿐 리액티브하게 구현하지 않았습니다. 만약 상태로 관리했다면 이 값을 바꾸는 함수를 통해 주소를 이동하고 쿼리 파싱하는 기능을 메모이제이션할 수 있었을 겁니다. 하지만 지금 어플리케이션에서 쿼리 문자열을 사용하는 화면이 제한적이고 쿼리문자열을 사용하는 화면간에 이동하는 기능이 없어서 구현하지는 않았습니다.

"useNavigate를 통해 화면간에 이동할 때마다 변하는 값으로 알아서 넣어두는게 더 이상적이라고 생각하고 실습을 진행했다"고 하셨는데요. 아마 Router 상태 path에 값을 "/cart?foo=bar" 형태로 넣으셨을 것 같네요. 그런 조건에일 때 라우터의 상태를 컨택스트로 전달받아 이 값을 메모이제이션 훅의 의존성으로 넣어 구현할 수 있을 것 같습니다.

컴포넌트 상태나 인자가 아닌 글로벌 객체의 변수인 window.location.search 값은 아무리 변경하더라도 컴포넌트를 다시 렌더하지 않는다는 점을 유념해 주시면 좋습니다.