useSelector 최적화

리덕스를 사용해 전역으로 값을 관리하며 최적화를 진행했다.

1. reselect 라이브러리를 사용하여 selector로 관리하는 값 memoization

2. react-redux에서 제공하는 shallowEuqal 함수를 사용해 렌더링 최소화

 

shallowEqual 함수는 객체의 가장 겉에 값들을 모두 비교하는데, 

const object = {
  a: {
    x: 3,
    y: 2,
    z: 1
  },
  b: 1,
  c: [{ id: 1 }]
}

위 객체가 있다면 object.a, object.b, object.c만 비교하고 object.a.x 처럼 한뎁스 더 들어가는 값들은 비교하지 않는다.

 

shallowEqual 말고 useSelector로 가져온 값을 객체 형식이 아닌 독립적으로 선언해줘도 된다.

// shallowEqual 사용
const { editable, diposeGroups } = useSelector(
    (state: RootState) => ({
      editable: state.editable,
      diposeGroups: state.diposeInfo,
    }),
    shallowEqual
);

// 독립적으로 선언
  const { editable } = useSelector((state: RootState) => state.editable);
  const diposeInfo = useSelector((state: RootState) => state.diposeInfo);