Redux Hooks?

리액트에서 리덕스를 사용하기 위해서는

• 고차 컴포넌트(HOC, 이하 HOC) connect() 로 컴포넌트 감싸기
• mapStateToProps 작성
• mapToDispatchToProps 작성

위 과정을 해야만 리덕스 스토어에 접근할 수 있었다. 리덕스에서 hooks를 지원하게 되면서 이러한 작업 없이 간결하고, 코드 재사용성에 유리하게 코드를 작성할 수 있게 되었다. 리덕스 공식문석 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()을 사용하여 자식 구성요소의 불필요한 렌더링을 방지
  1. 부모 컴포넌트 > 자식 컴포넌트로 콜백함수 props 전달
  2. 부모 컴포넌트 화면이 랜더링 될 때마다 콜백함수 생성(참조링크 변동)
  3. 자식 컴포넌트는 콜백함수 props의 참조링크 변동으로 인한 렌더링 시도

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>
  )
}