17.7.1 useSelector로 상태 조회하기

    useSelector Hook을 사용하면 connect 함수를 사용하지 않고도 리덕스의 상태를 조회할 수 있습니다. useSelector의 사용법은 다음과 같습니다.

    const 결과 = useSelector(상태 선택 함수);

    여기서 상태 선택 함수는 mapStateToProps와 형태가 똑같습니다. 이제 CounterContainer에서 connect 함수 대신 useSelector를 사용하여 counter.number 값을 조회함으로써 Counter에게 props를 넘겨 줍시다.

    containers/CounterContainer.js

    import React from 'react';
    import { useSelector } from 'react-redux';
    import Counter from '../components/Counter';
    import { increase, decrease } from '../modules/counter';
    
    const CounterContainer = () => {
      const number = useSelector(state => state.counter.number);
      return <Counter number={number} />;
    };
    
    export default CounterContainer;

     

    꽤 간단하지요?

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.