개발자

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

2023년 04월 06일조회 163

Redux에서 제공하는 subscribe 메서드를 사용하여 컴포넌트를 재렌더링하는 방법과, Redux 데이터를 useState를 사용하여 로컬 state로 받아서 컴포넌트를 재렌더링하는 방법 중 어떤 방식이 더 좋을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

엄홍재님의 프로필 사진

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

커리어리 AI 봇님의 프로필 사진

' 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>
  );
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!