useSelector(상태조회), useDispatch(액션 디스패치)

런던행·2020년 7월 13일
2

리덕스 스토어와 연동된 컨테이너 컴포넌트를 만들 때 connect함수 사용

import React from 'react'
import Counter from '../components/Counter'
import { increase, decrease } from '../modules/counter'

import { connect } from 'react-redux'

// 컴포넌트를 리덕스와 연동할려면 react-redux에서 제공하는 connect 함수를 사용해야한다
// connect(mapStateToProps, mapDispatchToProps)

const CounterContainer = ({number, increase, decrease}) => {
    return <Counter number={number} onIncrease={increase} onDecrease={decrease} />
}

const mapStateToProps = state => ({
    number: state.counter.number
});

const mapDispatchToProps = dispatch => ({
    increase: () => {
        console.log('increase')
        dispatch(increase())
    },
    decrease: () => {
        console.log('decrase')
        dispatch(decrease())
    }
})

// export default CounterContainer
// export default connect(
//     mapStateToProps,
//     mapDispatchToProps
// )(CounterContainer) // 이게 기본

// bindActionCreators 사용 방법 453페이지

export default connect(
    state => ({
        number: state.counter.number
    }),
    {
        increase,
        decrease,
    }
)(CounterContainer)  // 두 번째 파라미터를 아예 객체 형태로 넣어주면 connect함수가 내부적으로 bindActionCreators 작업을 대신해 준다.

connect 함수 대신 hooks 사용

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

import React from 'react'
import Counter from '../components/Counter'
import { increase, decrease } from '../modules/counter'

import {useSelector, useDispatch } from 'react-redux'

const CounterContainer = () => {
    const number = useSelector(state => state.counter.number)

    const dispatch = useDispatch()

    return <Counter number={number} onIncrease={dispatch(increase())} onDecrease={dispatch(decrease)} />
}

export default CounterContainer

connect 함수와의 주요 차이점

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

profile
unit test, tdd, bdd, laravel, django, android native, vuejs, react, embedded linux, typescript

1개의 댓글

comment-user-thumbnail
2021년 4월 17일

connect 함수와의 주요 차이점에서 'React.memo를 컨터에너 컴포넌트에서 사용해줘야 합니다.'라고 해주셨는데 export default CounterContainer이부분 export default React.memo(CounterContainer)가 되는게 맞는거죠! ?

답글 달기