Connect 방식 VS useSelector 방식 비교

Redux를 처음 배웠을 때 옛날 영상을 참고했는데 connect를 사용하는 방식으로 배웠다.
사용하면서 정말 난해하고 지저분하다라는 느낌을 받았는데, 알고보니 useSelector 라는 간편한 문법이 있었다.

이 두 가지가 어떻게 다른지 알아 본 내용을 간략하게 정리해보았다.

둘 중 어떤 것이 최신 문법인가?

useSelector는 Redux Toolkit과 함께 도입된 최신 문법이다.
이전에는 connect가 주로 사용되었지만, useSelector는 더 간결하고 직관적인 코드를 작성할 수 있으므로 보다 권고되는 방식이다.

많이 쓰이는 문법은 어떤 것인가?

최신 문법이며 더 간결한 코드를 작성할 수 있으므로, useSelector를 사용하는 경우가 더 많다.

둘의 차이는 무엇인가?

useSelector는 React Hooks를 사용하여 Redux Store에서 상태 값을 가져오는 데 사용된다.
connect는 HOC(Higher Order Component)를 사용하여 React 컴포넌트와 Redux Store를 연결하는 데 사용된다.
따라서 seSelector는 좀 더 간결하고 직관적인 코드를 작성할 수 있으며, 성능도 더 우수하다.

connet를 사용하다가 디스패치가 무한 랜더링된 적이 있다. 그래서 원인에 대해서 구글링해보았는데 찾아낸 내용은 아래와 같다.

connect 함수를 잘못 사용하면 무한 반복을 유발할 수 있습니다.

예를 들어, 컴포넌트 내부에서 connect 함수를 호출하고, 이 함수의 인자로 전달되는 함수에서 상태를 변경하는 액션을 디스패치한다면, 이 액션 디스패치로 인해 상태가 변경되고, 이에 따라 다시 컴포넌트가 렌더링되고, 다시 connect 함수가 호출되는 무한 반복이 발생할 수 있습니다.

따라서, connect 함수를 사용할 때에는 컴포넌트 내부에서 상태나 액션을 변경하는 로직을 작성하지 않고, 순수한 표시용 컴포넌트로 만들어서 사용하는 것이 좋습니다. 상태나 액션을 변경하는 로직은 컨테이너 컴포넌트에서 작성하고, 이 컴포넌트를 connect 함수로 연결하여 사용하는 것이 좋습니다. 또한 useSelector 훅을 사용하여 상태를 조회하고, useDispatch 훅을 사용하여 액션을 디스패치하는 것도 좋은 방법입니다.

코드 비교

connect 사용하는 방법

import { connect } from 'react-redux'
import { increment } from '../actions'

const Counter = ({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

const mapStateToProps = state => ({
  count: state.count
})

const mapDispatchToProps = { increment }

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

useSelector 사용하는 방법

import { useSelector, useDispatch } from 'react-redux'
import { increment } from '../actions'

const Counter = () => {
  const count = useSelector(state => state.count)
  const dispatch = useDispatch()

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  )
}

export default Counter