[ReactJS_Complete] useSelector, useDispatch

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

useSelector(state => state.module)

: 저장소에 등록된 데이터(상태, State)를 가져와서 쓸 수 있는 Hook

 : Redux 스토어의 상태 객체를 매개변수로 받고, 그 상태에서 필요한 값을 선택적으로 반환
즉, Redux 상태 객체에서 counter 속성을 선택하여 반환

* useSelector 사용 시, react-redux는 해당 컴포넌트를 저장소에 자동으로 구독 설정

즉, 저장소 데이터가 변경될 경우에 자동으로 최신 카운터를 전달 받음

 

 

useDispatch()

: Redux 저장소에 action에 대한 type을 전달하여 상태 업데이트

 

 

사용 예시

import {useSelector, connect, useDispatch} from 'react-redux';
// useSelector: 저장소가 관리하는 데이터 access
// connect: class Component 사용할 경우 추가
// Class Component를 감싸는 Wrapper로 사용하여 Wrapper로 감싸진 Class Component를 저장소에 연결
 
import classes from './Counter.module.css';
 
const Counter = () => {
 
  const counter = useSelector(state => state.counter);
 
  const dispatch = useDispatch();
 
  const incrementHandler = () => {
    dispatch({type: 'increment'});
  };
  const decrementHandler = () => {
    dispatch({type: 'decrement'});
  };
 
  const toggleCounterHandler = () => {};
 
  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      <div className={classes.value}>-- COUNTER VALUE: {counter} --</div>
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};
 
export default Counter;