[TIL] Redux의 useSelector, useDispatch

useSelector 훅

useSelector 훅은?

useSelector 훅은 리덕스 스토어의 state로부터 원하는 데이터만 선택할 수 있게 해주는 훅이다.

 

useSelector 훅을 통해 반환된 상태값이 변경된 경우 컴포넌트를 다시 렌더링 시킨다.

useSelector 훅 사용법

const result = useSelector(selector);

 

useSelector 훅의 인자로 selector 함수를 넣는다.

 

selector 함수는 리덕스 스토어의 state를 매개변수로 받아서 state를 가공한 후 반환한다.

 

useDispatch 훅

useDispatch 훅은?

useDispatch 훅은 리덕스 스토어의 dispatch 함수에 접근하기 위해 사용되는 훅이다.

 

dispatch 함수는 액션 객체를 스토어에 전달하는 역할을 한다.

 

액션 객체는 반드시 dispatch 함수로 전달해야 한다.

useDispatch 훅 사용법

const dispatch = useDispatch();

 

useDispatch 훅은 별도의 인자없이 호출해서 사용하면 된다.

 

호출하면 dispatch 함수를 반환해준다.

 

dispatch 함수 인자에 액션 객체를 넣어서 호출하게 되면 액션 객체가 스토어에 전달된다.