[React] useDispatch와 useCallback 함께 사용하기 + useSelector

import { useDispatch, useSelector } from 'react-redux';
import Counter from '../components/Counter';
import { increase, decrease } from '../redux/modules/counter';

const CounterContainer = () => {
  const number = useSelector(state => state.counter.number);
  const dispatch = useDispatch();
  return (<Counter 
  number = {number} 
  onIncrease={() => dispatch(increase())}
  onDecrease={() => dispatch(decrease())}
  /> );
};

export default CounterContainer;

+1버튼, -1 버튼을 눌러서 숫자가 바뀔 때 마다 onIncrease()함수와 onDecrease() 함수가 새로 만들어지고 있습니다.

컴포넌트 최적화를 위해 useCallback을 사용해 액션을 디스패치 하는 함수를 감싸줍시다

 

import { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Counter from '../components/Counter';
import { increase, decrease } from '../redux/modules/counter';

const CounterContainer = () => {
  const number = useSelector(state => state.counter.number);
  const dispatch = useDispatch();
  const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);
  const onDecrease = useCallback(() => dispatch((decrease()), [dispatch]));
  return (
    <Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} />

);
};

export default CounterContainer;

아예 변수에 담아서 사용하니 코드도 훨씬 간결하고 보기 좋네요 !! 

 

 

Connect 함수와 useSelector 함수의 차이점

1. connect 함수의 성능 최적화

'connect' 함수를 사용하여 컨테이너 컴포넌트를 생성할 경우에는 'shouldComponentUpdate' 메서드를 이용하여 최적화 작업이 자동으로 이루어집니다. 
'shouldComponentUpdate' 메서드는 부모 컴포넌트가 리렌더링 될 때, 해당 컨테이너 컴포넌트의 props가 바뀌지 않았다면 리렌더링을 방지하여 성능을 최적화 해줍니다.

 

2. useSelector 함수의 성능 최적화

'useSelector' hooks를 사용해 Redux 상태를 조회할 대는, 자동으로 최적화 작업이 이루어지지 않습니다. 
함수형 컴포넌트의 특성 때문인데요, React 렌더링 과정에서 'useSelector'로 조회한 값이 변경되었는지에 대한 비교를 수행하지 않기 때문입니다. 따라서 Redux 상태가 변경되지 않았더라도 부모 컴포넌트가 리렌더링 되면 해당 컴포넌트 내부의 'useSelector' 가 새로운 값을 조회하게 되어 리렌더링이 발생하게 됩니다.

==> 이 경우 'React.memo'를 사용해 최적화 할 수 있습니다.

 

결론

'connect' 함수는 자체적으로 성능 최적화를 제공하기 때문에 props가 변경되지 않았을 때 리렌더링을 방지합니다.
'useSelector' 훅은 이런 최적화를 제공하지 않으므로, 'React.memo'를 이용하여 성능 최적화를 직접 구현해주어야 합니다.

😺