useSelector 최적화 하기

수정전 useSelector

  const preview = useSelector((state) => state.image2.preview, shallowEqual);
  const is_file = useSelector((state) => state.image2.file);
  const profile = useSelector((state) => state.profile.user);
  const onlyImg = useSelector((state) => state.image2.image);
  const is_category = useSelector((state) => state.category.select_category);

수정후 useSelector

하나씩 가져오는게 아니라 배열안에 담아서 한번에 가져왔다

useSelector 훅의 두 번째 매개변수는 컴포넌트 렌더링 여부를 판단하는 역할을 한다. 이 매개변수가 없는 경우 참조 값만 비교하는 단순 비교 함수가 사용됨. 따라서 선택자 함수가 객체 리터럴을 반환하면 컴포넌트가 불필요하게 렌더링되는 문제가 발생. 이 때 react-redux의 shallowEqual 함수를 이용할 수 있다.

  //shallowEqual을 써줘서 렌더링 될때마다 useSelector로 가져온 값을 비교하고 같으면 
  const [preview, is_file, profile, onlyImg, is_category] = useSelector(
    (state) => [
      state.image2.preview,
      state.image2.file,
      state.profile.user,
      state.image2.image,
      state.category.select_category,
    ],
    shallowEqual
  );

참고 : https://velog.io/@ksh4820/react-redux-reselect-%ED%8C%A8%ED%82%A4%EC%A7%80