[React] useSelector 최적화

CounterContainer와 TodosContainer가 렌더링 되어 있는 모습
Container는 리덕스에 있는 상태를 가져와서 보여줌

Profiler에서 리렌더링 상황을 살펴볼수 있는데
Counter 버튼을 클릭하면 CounterContainer가 리렌더링 되고
TodosContaioner는 리렌더링 되지않음
리렌더링 o - 노란색배경
리렌더링 x - 회색빗금

하지만 할 일 목록의 항목을 토글 할 때에는 카운터가 리렌더링되는 것을 확인 할 수 있습니다.

useSelector를 사용해서 리덕스 스토어의 상태를 조회 할 땐 만약 상태가 바뀌지 않았으면 리렌더링하지 x

👉 TodosContainer.js

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

==> 카운터 값이 바뀔 때 todos 값엔 변화가 없으니까, 리렌더링되지 x

👉 CounterContainer.js

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

==> useSelector를 통해 매번 렌더링 될 때마다 새로운 객체 { number, diff }를 만드는 것이기 때문에 상태가 바뀌었는지 바뀌지 않았는지 확인을 할 수 없어서 계속 리렌더링 되는 것

📖 최적화 방법 2가지.

👉 1. useSelector 를 여러번 사용하는 것

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

==> 이렇게 하면 해당 값들 하나라도 바뀌었을 때에만 컴포넌트가 리렌더링

👉 2. react-redux의 shallowEqual 함수를 useSelector의 두번째 인자로 전달해주는 것

 const { number, diff } = useSelector(
    state => ({
      number: state.counter.number,
      diff: state.counter.diff
    }),
    shallowEqual  // shallowEqual은 react-redux에 내장되어있는 함수로서, 객체 안의 가장 겉에 있는 값들을 모두 비교
  );

==> 이전 값과 다음 값을 비교하여 true가 나오면 리렌더링을 하지 않고 false가 나오면 리렌더링