[React, RTK] state변경 시 re-render 질문있습니다

Question

안녕하세요 공부하면서 웹사이트를 만들고 있는데, 답이 안나와서 질문드립니다 ㅜㅜ 컴포넌트가 여러 개의 자식 컴포넌트를 render하는 구조입니다.(map함수 사용)구현하고자 하는 기능은 'ctrl', 'shift'키를 누른 채로 클릭하면 여러 개의 컴포넌트를 선택할 수 있는 것입니다. (윈도우 파일 선택과 유사합니다)해당 기능을 구현하기 위해서별도의 커스텀 훅에서 'ctrl', 'shift' keydown을 감지하고(Boolean), 이를 redux store에 저장합니다. 컴포넌트에서 해당 'ctrl', 'shift' states를 useSelector를 사용해서 가지고옵니다. 컴포넌트를 클릭하면 itemClickHandler가 trigger되고, 'ctrl', 'shift' 키가 눌려있는지에 따라서 기능을 분기처리합니다.제가 마주한 문제는 다음과 같습니다.컴포넌트가 여러 개 존재하기 때문에, 'ctrl', 'shift' states에 변화가 생길때마다 모든 컴포넌트가 re-render됩니다.의 개수가 많아질수록 성능이 저하돼서 이를 막고싶습니다.해결하고자 시도한 방법은React.memo를 이용해서 props로 'ctrl', 'shift' states를 전달 -> 어짜피 state가 변하면 re-render되므로 문제가 해결되지 않았습니다.문제를 어떻게 해결할 수 있을까요 ㅜㅜ 감사합니다const Item = () => { const isCtrlKeyDown = useSelector((state) => state.modifier.ctrl); const isShiftKeyDown = useSelector((state) => state.modifier.shift); const itemClickHandler = (id) => { if (isCtrlKeyDown) { ... } if (isShiftKeyDown) { ... } } return ( ... ) }

국내산감자튀김 · Accepted Answer

리렌더링되는게 문제라면 훅 대신 이벤트 핸들러에서 e.ctrlKey, e.shiftKey로 분기하시면 어떨까요 const itemClickHandler &#61; (clickEvent) &#61;> { if (clickEvent.ctrlKey &#61;&#61;&#61; true) { // ctrlKey가 눌린 상태에서 클릭됨 // ... } else if (clickEvent.shiftKey &#61;&#61;&#61; true) { // shiftKey가 눌린 상태에서 클릭됨 // ... } else { // 일반 클릭 // ... } }https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKeyhttps://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey

[React, RTK] state변경 시 re-render 질문있습니다

1개의 답변

#redux-toolkit 목록