리액트에서 리덕스를 사용하기 위해서는
connect()
로 컴포넌트 감싸기mapStateToProps
작성mapToDispatchToProps
작성위 과정을 해야만 리덕스 스토어에 접근할 수 있었다. 리덕스에서 hooks를 지원하게 되면서 이러한 작업 없이 간결하고, 코드 재사용성에 유리하게 코드를 작성할 수 있게 되었다. 리덕스 공식문석 hooks에서 자세한 내용을 볼수 있다.
사용하기에 앞서 hooks를 사용하더라고 루트 컴포넌트를 <Proviver store={store}>
로 감싸야 하는 것은 여전하다.
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를 같는요소 반환
useSelector()
는 리덕스 스토어의 데이터를 추출할 수 있으며, 개념적으로 mapStateToProps
와 거의 같다.
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()
왜 useCallback()
과 함께 사용해야 할까?
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>
)
}