[TIL] 24_0128 리덕스 세팅하면서 useSelector로 state확인하며 경고발생

리덕스를 세팅하면서 useSelector로 state값이 잘 들어오나 확인하려고 state전체를 가져와서 통째로 리턴했더니 불필요한 렌더링이 일어났다며  전체 state를 반환하는 Selector는 상태가 변경될 때마다 다시 렌더링되니까 주의하라는 메세지가 떴어.

 

 

발생한 경고

Selector unknown returned the root state when called. This can lead to unnecessary rerenders.
Selectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.

 

중앙 데이터 저장소인 store에서 state전체값을 그대로 가져왔고, 거기다 전체값을 return하려고 해서 문제.

 

원인 코드

import { useSelector } from "react-redux";

function App() {
  // 여기에서 store에 접근해서, counter의 값을 읽어오고 싶어.
  const data = useSelector((state) => {
    return state;
  });
  console.log(data);
  return <div>redux</div>;
}

export default App;

 

 

 

문제 : 한꺼번에 useSelector로 state값 전체를 가져오려고 해서 난 문제야(전체를 가져와서 리턴했어)

 

해결:

  const counter = useSelector((state) => {
    return state.counter;
  });
  console.log(counter.number);

 

리턴할 땐 전체 state를 리턴하지 말고 그 안의 필요한 state를 리턴해야 해.

 

 

*참고사이트

- https://stackoverflow.com/questions/76492706/selector-memoized-returned-the-root-state-when-called-redux-toolkit

- https://velog.io/@keynene/ErrorTypeScript-Redux-useSelector.js76-Selector-unknown-returned-the-root-state-when-called.-This-can-lead-to-unnecessary-rerenders.-%EB%B6%88%ED%95%84%EC%9A%94%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0.-useSelector-%EB%B2%94%EC%9C%84%EC%A7%80%EC%A0%95