useSelector 최적화

기본 사용법  

useSelector는 리덕스 스토어의 상태를 조회하는 Hook이다.

import { useSelector } from 'react-redux';

//RootState 중에 내가 가져오고 싶은 todo를 가져온다. 
const todoList = useSelector((state: RootState) => state.todo)

//또는 useSelector안에서 원하는 형식으로 바꿔서 리턴할 수도 있다.
const list = useSelector((state: RootState) => {
      const { todo } = state
      return Array.from(todo.todo.values())
})

 기본적으로, useSelector를 사용해서 리덕스 스토어의 상태를 조회 할 땐 만약 상태가 바뀌지 않았으면 리렌더링하지 않는다.

( 약간 useEffect재질 )

 

 

최적화하는 경우 

그런데 useSeletor를 사용해서 한번에 여러 상태를 가져오는 경우,

//RootState중에 내가 가져오고 싶은 number, diff상태를 가져온다.
const { number, diff } = useSelector((state : RootState) => ({
  number: state.counter.number,
  diff: state.counter.diff
}));

조회하고자 하는 상태가 두 개 이므로 둘중에 하나만 상태가 바뀌더라도 리렌더링되는 문제가 발생한다.

이를 방지하기 위해 두가지 방법을 사용할 수 있다.

 

 

1. useSelector 를 여러번 사용한다.

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

그럼 각각의 상태가 바뀔 때만 리렌더링된다.

 

 

2. react-redux의 shallowEqual 함수를 useSelector의 두번째 인자로 전달해준다.

import React from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';

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

useSelector의 두번째 인자는 equalityFn 으로, 이전 값과 다음 값을 비교하여 true가 나오면 리렌더링을 하지 않고 false가 나오면 리렌더링을 한다.

equalityFn?: (left: any, right: any) => boolean

shallowEqual은 react-redux에 내장되어있는 함수로서, 객체 안의 가장 겉에 있는 값들을 모두 비교해줍니다. (얕은 비교)

 

 

 

 

 

 

참고사이트 : https://react.vlpt.us/redux/08-optimize-useSelector.html

8. useSelector 최적화 · GitBook