useSelector

react-redux의 hook으로 Redux store상태를 유일한 인수로 사용하여 호출 한다. 액션 전달시 이전값과 현재값을 참조 비교하여 서로 다른경우만 강제렌더링이 일어나고 동일하면 렌더링 되지 않는다. !!!?
공식문서

store에서 상태를 가저오는 방법 1

기본적으로 useSelector를 사용햇 리덕스 스토어의 상태를 조회하면 상태가 봐끼지 않을 경우 리렌더링되지 않는다. 여기서는 렌더링 될때마다 새로운 객체를 만들기 때문(reducer에서 새로운 객체를 만들어 상태 변환)에 상태가 봐끼엇는지 확인 할 수 없어 낭비 렌더링이 발생.

   const { number, diff } = useSelector((state) => {
     return {
       number: state.counter.number,
       diff: state.counter.diff,
     };
   });

store에서 상태를 가저오는 방법 2

각각의 변수의 값을 객체에서 할당받지 않고 각각 store 상태에서 가저오는 방법.
원시데이터를 비교하게되어 상태가 봐끼었는지 비교가 가능하게되어 불필요한 렌더링이 발생하지 않는다.

 const number = useSelector((state) => state.counter.number);
 const diff = useSelector((state) => state.counter.diff);

store에서 상태를 가저오는 방법 3

useSelector는 두개의 인자를 받을 수 있다.

useSelector(selector: Function, equalityFn?: Function)

두번째 인자에 react-redux의 함수인 shallowEqual을 통해 boolean값을 반환받는다. boolean값은 객체의 가장 겉의 값들을 전후 비교하여 반환되며, true면 값이 같다는 뜻이며 리런데거 발생되지 않고, false경우 리렌더를 강재로 실행시킨다.

const { number, diff } = useSelector((state) => {
    renderCount++;
    console.log(renderCount);
    return {
      number: state.counter.number,
      diff: state.counter.diff,
    };
  }, shallowEqual);