useMemo내에서 사용되는 window.location.search 를 deps에서 제외한 이유
476
작성한 질문수 39
안녕하세요. 정환님 드디어 강의도 마무리되어가는데
살짝 이해가 안된 부분이 있습니다.
URLSearchPrarms 를 통해 query param를 파싱하는 부분을 캐싱하는 부분에서 window.location.search 는 딱 한번만 바뀌고 거의 바뀌지않을 것이라고 이야기하셨는데 같은 페이지에서 navigate가 흔히 있는 요구사항이 아닌가요?
저희가 사용하는 Router의 useNavigate를 통해 화면간에 이동할 때마다 변하는 값으로 알아서 넣어두는게 더 이상적이라고 생각하고 실습을 진행했습니다.
저희 예제에서는 cart 페이지에서 cart로 이동할 비지니스 요구사항은 없어서 괜찮지만 예를들어 다른 상품이 담겨있는 장바구니로 이동하는 요구사항이 있다면 /cart?productId=CACDA421 => /cart?productId=CACDA423
deps에 window.location.search를 넣어두는게 안전해보이는데 최적화가 필요한 부분이었을까요?
답변 2
1
아 그러네요. query parameter를 따로 상태로 둬야겠군요.
리렌더링을 트리거하지않으면 deps에 넣어두는게 의미없 수 있겠네요. React router dom library에서 어떻게쓰는지 확인해보겠습니다
1
예제에서 구현한 MyRouter는 경로(path)만 상태로 관리했습니다. Router 컴포넌트가 이 상태를 관리하고 있고 컨택스트를 통해 각 컴포넌트들에게 전달하는 구조인데요. 이들 컴포넌트 중에서 상태 변경 함수를 실행해 경로값을 바꾸면 Router 컴포넌트와 하위의 소비자 컴포넌트들이 다시 렌더링 되면서 페이지가 전환됩니다.
하지만 쿼리문자열은 그렇지 않습니다. 브라우져 주소창에만 변경될 뿐 리액티브하게 구현하지 않았습니다. 만약 상태로 관리했다면 이 값을 바꾸는 함수를 통해 주소를 이동하고 쿼리 파싱하는 기능을 메모이제이션할 수 있었을 겁니다. 하지만 지금 어플리케이션에서 쿼리 문자열을 사용하는 화면이 제한적이고 쿼리문자열을 사용하는 화면간에 이동하는 기능이 없어서 구현하지는 않았습니다.
"useNavigate를 통해 화면간에 이동할 때마다 변하는 값으로 알아서 넣어두는게 더 이상적이라고 생각하고 실습을 진행했다"고 하셨는데요. 아마 Router 상태 path에 값을 "/cart?foo=bar" 형태로 넣으셨을 것 같네요. 그런 조건에일 때 라우터의 상태를 컨택스트로 전달받아 이 값을 메모이제이션 훅의 의존성으로 넣어 구현할 수 있을 것 같습니다.
컴포넌트 상태나 인자가 아닌 글로벌 객체의 변수인 window.location.search 값은 아무리 변경하더라도 컴포넌트를 다시 렌더하지 않는다는 점을 유념해 주시면 좋습니다.
잘못된 useEffect 사용?
1
65
2
useEffect 의존성 질문
1
58
2
orderableProductItem 에 관하여...
0
57
2
강의 자료, 블로그, 깃 주소
0
63
1
React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)
1
104
2
pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.
1
87
2
FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 중괄호 이유
1
123
1
dispatch 함수도 리렌더링 유발하지 않나요?
1
203
2
ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유
1
160
2
replaceState를 쓰지 않는 대안
1
196
2
setValue 메서드를 바인딩 해야 하는 이유
1
163
2
MyReact를 IIFE(즉시실행함수)로 설계하신 이유
0
209
2
[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교
0
129
1
useRef 관련하여 질문드립니다
0
152
2
렌더 프롭 관련하여 질문드립니다
0
183
2
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
1
395
2
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
1
317
2
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
1
355
2
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
1
281
2
[4.1장 레프 훅] useRef관련 질문이있습니다.
1
334
1
[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다
2
284
1
[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.
1
432
2
[1.3.6 상태정의] state 관련
1
259
1
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.
1
272
1