[React] useSelector, useDispatch

connect 함수 대신 hooks 사용

상태 조회는 useSelector, 액션 생성은 useDispatch

useSelector()

// 반환값  = useSelector(함수, === 비교 함수)
const result: any = useSelector(selector: Function, equalityFn?: Function)

// 적용
const counter = useSelector(state => state.counter) // state.counter를 반환
const todo = useSelector(state => state.todos[props.id]) // state.todos중 특정 id를 같는요소 반환

 

useDispatch()

const dispatch = useDispatch()

// 적용: dispatch({type:액션타입})
<button onClick={()=>dispatch({type:액션타입})}>

// 적용 dispatch(actions.액션크리에이터(값))
import * as actions from 'src/redux/actions' // 액션모아둔 모듈 불러오기
<button onClick={()=>dispatch(actions.addTodo({id:1,title:'밥먹기'}))} >

• 액션 타입으로 실행 : dispatch({ type: ACTION_TYPES })
• 액션 크리에이터로 실행 : dispatch( actionCreater(arg) )

 

useDispatch() with useCallback()

import React, {useCallback} from 'react
import { useDispatch } from 'react-redux'

const CounterCompo = ({value}) => {
  // useDispatch 사용
  const dispatch = useDispatch()
  // useCallback으로 콜백함수 생성
  const onClickIncrement = useCallback(()=> (
    dispatch({ type: 액션타입 })
  ), [dispatch] )
  
  return (
    <div>
      // 
      <ButtonCompo onClick={onClickIncrement} />
    </div>
  )
}
  

 

connect 함수와의 주요 차이점

컨테이너 컴포넌트를 만들 때 connect 함수를 사용해도 좋고, useSelector와 useDispatch를 사용해도 좋습니다. 차이점은 connect함수를 사용하는 경우 해당 컨테이너 컴포넌트의 부모 컴포넌트가 리렌더링될 때 해당 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 자동으로 방지되지만 hook은 그렇지 않기 때문에 성능 최적화를 이루기 위해 React.memo를 컨터에너 컴포넌트에서 사용해줘야 합니다.