[React다루는기술] 20. useSelector Hook, useDispatch Hook 사용

15 Feb 2024 in React on React 다루는 기술

useSelector Hook과 useDispatch Hook 사용예제 포스팅이다.

1. useSelector Hook과 useDispatch Hook

useSelector 로 상태 조회
- useSelector Hook을 사용하면 connect 함수를 사용하지 않고 리덕스 상태를 조회할 수 있다.
useDispatch 로 액션 디스패치
- useDispatch라는 Hook은 컴포넌트 내부에서 스토어의 내장 함수 dispatch를 사용할 수 있게 한다.
- INCREASE와 DECREASE 액션을 발생시킨다
useCallback 로 선능 최적화
- 숫자변경시에 계속 컴포넌트 리렌더링을 막아 성능 최적화해야 하는 상황이면 useCallback 액션을 디스패치하는 함수를 감싼다.
- useDispatch 를 사용시에는 useCallback 과 함께 사용하는 습관을 권장한다.

CounterContainer.js 이전 코드

import { connect } from "react-redux";
import Counter from "../components/Counter";
import { increase, decrease } from "../modules/counter";

const CounterContainer = ({ number, increase, decrease }) => {
  return (
    <Counter number={number} onIncrease={increase} onDecrease={decrease} />
  );
};

export default connect(
  (state) => ({
    number: state.counter.number,
  }),
  (dispatch) => ({
    increase: () => dispatch(increase()),
    decrease: () => dispatch(decrease()),
  })
)(CounterContainer);

CounterContainer.js useSelector Hook과 useDispatch Hook 예제

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

/*
1. useSelector 로 상태 조회
  - useSelector Hook을 사용하면 connect 함수를 사용하지 않고 리덕스 상태를 조회할 수 있다.
2. useDispatch 로 액션 디스패치
  - useDispatch라는 Hook은 컴포넌트 내부에서 스토어의 내장 함수 dispatch를 사용할 수 있게 한다.
    INCREASE와 DECREASE 액션을 발새시키는 예제
3. useCallback 로 선능 최적화
  - 숫자변경시에 계속 컴포넌트 리렌더링을 막아 성능 최적화해야 하는 상황이면
    useCallback 액션을 디스패치하는 함수를 감싼다.
  - useDispatch 를 사용시에는 useCallback 과 함께 사용하는 습관을 권장한다.
*/
const CounterContainer = () => {
  const number = useSelector((state) => state.counter.number);
  console.log(typeof number, 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;

2. useStore Hook

리덕스 스토어를 useStore 를 사용하면 컴포넌트 내부에서 리덕스 스토어 객체를 직접 사용할 수있다.

const store = useStore();
store.dispatch({ type: 'SAMPLE_ACTION' })
store.getState();

useStore 는 컴포넌트에서 정말 어쩌다가 스토어에 직접 접근해야 하는 상황에만 사용해야 한다.

리액트를 다루는 기술(개정판)