React - Redux 5

리덕스에 있는 state를 꺼내쓰려면 state를 props화 해주는 함수를 사용해야하는 등 코드가 조금 복잡해집니다. 이것을 간단하게 해주는 방법에 대해서 알아보겠습니다.

 

1️⃣  useSelector 훅 사용하기

 

우선 useSelector 훅을 사용하기 위해서는 우선 import를 해줘야 합니다.

 

import {useSelector} from 'react-redux' 를 import 해주는 곳에 입력해줍니다.

 

useSelector는 다음과 같이 사용합니다.

 

const state = useSelector((state) => state);

 

• useSelector를 사용하면 그 자리에 redux state가 남게 됩니다. 그것을 변수에 할당해서 사용하는 것입니다.
• 콜백함수의 파라미터 자리에는 파라미터가 한 개 들어갈 수 있는데 그것은 자동으로 store가 됩니다. store에는 만들어 둔 reducer들이 다 들어가 있습니다.

 

 

2️⃣  useDispatch 훅 사용하기

 

일단 당연히 import를 먼저 해줘야 합니다. import {useSelector, useDispatch} from 'react-redux'; 을 입력해줍니다. 

 

useDispatch는 다음과 같이 사용합니다.

 

const dispatch = useDispatch();

 

useDispatch를 사용하면 그 자리에 dispatch 함수가 남게 됩니다. 그것을 변수에 저장해서 사용하는 것입니다. 그러면 이제 기존에 props.dispatch 라고 사용하던 것을 그냥 dispatch만으로도 동일하게 사용할 수 있습니다.