<div id="readability-page-1" class="page"><article id="post-react/2024/02/15/[React다루는기술] 20.useSelector Hook, useDispatch Hook" role="article"><header> <time datetime="2024-02-15T00:00:00+00:00">15 Feb 2024</time> in <a href="/category/react/" data-flip="title">React</a> on <a href="/tag/react-dealwith/" data-flip="title">React 다루는 기술</a></header><div>useSelector Hook과 useDispatch Hook 사용예제 포스팅이다.<h2 id="1-useselector-hook과-usedispatch-hook">1. useSelector Hook과 useDispatch Hook</h2><ul><li><code>useSelector</code> 로 상태 조회<ul><li>useSelector Hook을 사용하면 connect 함수를 사용하지 않고 리덕스 상태를 조회할 수 있다.</li></ul></li><li><code>useDispatch</code> 로 액션 디스패치<ul><li>useDispatch라는 Hook은 컴포넌트 내부에서 스토어의 내장 함수 dispatch를 사용할 수 있게 한다.</li><li>INCREASE와 DECREASE 액션을 발생시킨다</li></ul></li><li><code>useCallback</code> 로 선능 최적화<ul><li>숫자변경시에 계속 컴포넌트 리렌더링을 막아 성능 최적화해야 하는 상황이면 useCallback 액션을 디스패치하는 함수를 감싼다.</li><li>useDispatch 를 사용시에는 useCallback 과 함께 사용하는 습관을 권장한다.</li></ul></li></ul><blockquote>CounterContainer.js 이전 코드</blockquote><div><pre><code>import { connect } from "react-redux";
import Counter from "../components/Counter";
import { increase, decrease } from "../modules/counter";

const CounterContainer = ({ number, increase, decrease }) =&gt; {
 return (
 &lt;Counter number={number} onIncrease={increase} onDecrease={decrease} /&gt;
 );
};

export default connect(
 (state) =&gt; ({
 number: state.counter.number,
 }),
 (dispatch) =&gt; ({
 increase: () =&gt; dispatch(increase()),
 decrease: () =&gt; dispatch(decrease()),
 })
)(CounterContainer);
</code></pre></div><blockquote>CounterContainer.js useSelector Hook과 useDispatch Hook 예제</blockquote><div><pre><code>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 = () =&gt; {
 const number = useSelector((state) =&gt; state.counter.number);
 console.log(typeof number, number);

 const dispatch = useDispatch();
 const onIncrease = useCallback(() =&gt; dispatch(increase(), [dispatch]));
 const onDecrease = useCallback(() =&gt; dispatch(decrease(), [dispatch]));

 return (
 &lt;Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} /&gt;
 );
};

export default CounterContainer;
</code></pre></div><h2 id="2-usestore-hook">2. useStore Hook</h2>리덕스 스토어를 useStore 를 사용하면 컴포넌트 내부에서 리덕스 스토어 객체를 직접 사용할 수있다.<div><pre><code>const store = useStore();
store.dispatch({ type: 'SAMPLE_ACTION' })
store.getState();
</code></pre></div>useStore 는 컴포넌트에서 정말 어쩌다가 스토어에 직접 접근해야 하는 상황에만 사용해야 한다.<hr><ul><li><a href="https://m.yes24.com/Goods/Detail/79260300">리액트를 다루는 기술(개정판)</a></li></ul><div><a href=""><img src="https://linked2ev.github.io/assets/img/2024/react-deal-book-img.png" alt="react-deal-book-img"></a></div></div></article></div>

linked2ev

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 는 컴포넌트에서 정말 어쩌다가 스토어에 직접 접근해야 하는 상황에만 사용해야 한다.
 
리액트를 다루는 기술(개정판)

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

댓글