[React] 경고문 fix Selector unknown returned the root state when called. This can lead to unnecessary rerenders.

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.

회사에서 리액트로 개발하던 도중 항상 이 경고문이 신경쓰였다.

 

여기 온 사람들도 모두 나와 같은 생각일 것이다.

 

결론부터 말하자면,

const state = useSelector(state=>state);

 

위에 원인이 되었던 코드를

    const Mode = useSelector(state=>state.Mode);

    const country = useSelector(state=>state.country);

    const small_bet = useSelector(state=>state.small_bet);

    const max_bet = useSelector(state=>state.max_bet);

    const id = useSelector(state=>state.id);

    const money = useSelector(state=>state.money);

    const LastWinMoney = useSelector(state=>state.LastWinMoney);

    const IsEnd = useSelector(state=>state.IsEnd);

    const TotalBettingMoney = useSelector(state=>state.TotalBettingMoney);

 

하나하나 변수명을 따로 지정해서 넣어주면 해결된다.

 

필자는 Redux를 쓸 때 state를 한꺼번에 가져와서 쓰면 편하다고 생각했지만,

 

{state.Mode==='2'&&<div className='GameLogo'></div>}

 

이렇게 하면 모든 state가 변경될때마다 쓸데없는 재렌더링이 일어난다고 한다(그렇게 크게 느려지진 않던데...).

{Mode==='2'&&<div className='GameLogo'></div>}

 

이렇게 바꿔서 다들 사용하자.

 

모든 변수명을 바꾸려니까 힘들긴 하지만 경고안나는거보니까 깔끔하긴 하다.