Redux subscribe vs Redux useState, 어떤 방식이 더 좋을까요?

Redux가 전역 상태를 관리해 주게 되는데 이를 다시 useState로 감쌀 필요는 없을 것 같아요 Redux의 useSelector를 사용해서 렌더링을 하는 것이 더 좋아보입니다. dispatch를 이용해서 상태값을 변화시키면 useSelector hook을 통해 새로운 값을 가져오게 되고 해당 상태가 변경되었으면 리렌더링을 합니다.

' subscribe ' 메서드를 직접 사용하는 것보다는 ' React-Redux ' 라이브러리가 제공하는 ' useSelector '와 ' useDispatch ' 훅을 사용하는 것이 더 좋습니다. 이 훅들은 Redux와 React를 결합하는 데 필요한 최적화와 성능 개선을 제공하며, 코드 가독성과 유지 보수성이 향상됩니다. 1. ' subscribe ' 메서드를 사용하는 경우 ' subscribe ' 메서드를 사용하면 스토어가 변경될 때마다 구독자에게 알림을 보냅니다. 이렇게 하면 직접 구독을 관리해야 하고, 구독 취소를 처리해야 합니다. 또한, 성능 최적화를 직접 구현해야 하므로 코드가 복잡해질 수 있습니다. 2. ' useState '를 사용하여 로컬 상태로 받아오는 경우 이 방법은 Redux 상태와 컴포넌트의 로컬 상태를 동기화하는 데 어려움이 있을 수 있습니다. 또한, 이 방법은 컴포넌트가 불필요하게 재렌더링되는 경우가 있을 수 있습니다. 3. React-Redux의 ' useSelector '와 ' useDispatch ' 훅을 사용하는 경우 React-Redux 라이브러리의 ' useSelector '와 ' useDispatch ' 훅을 사용하면 코드를 더 간결하게 작성할 수 있으며, 최적화와 성능 개선도 쉽게 이용할 수 있습니다. 이러한 훅을 사용하면 컴포넌트가 스토어의 상태를 구독하고 액션을 디스패치할 수 있습니다. 결론적으로, React-Redux 라이브러리의 ' useSelector '와 ' useDispatch ' 훅을 사용하는 것이 더 좋은 방법입니다. 이 방법은 코드 가독성과 유지 보수성이 향상되며, 성능 최적화를 쉽게 이용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions/counterActions';

function Counter() {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}