React-Redux) useSelector 사용 방법과 connect 차이점

React Redux에서 useSelector 훅을 사용하면 connect 함수를 사용하지 않고도 스토어의 상태를 컴포넌트에 연결할 수 있습니다. useSelector 훅은 React 컴포넌트에서 Redux 스토어의 상태를 선택하는 데 사용됩니다.

사용법은 다음과 같습니다.

 

import { useSelector } from 'react-redux';

function MyComponent() {
  const myValue = useSelector(state => state.myValue);

  // ...
}

 

useSelector 함수는 스토어의 상태에서 필요한 값을 선택하기 위해 사용됩니다. 이전의 mapStateToProps 함수와 비슷한 역할을 합니다. useSelector 함수의 인자로 전달되는 함수는 스토어의 전체 상태를 인자로 받으며, 반환값으로 필요한 값을 선택하여 리턴합니다. 이렇게 선택된 값은 myValue 변수에 할당됩니다.

useSelector 훅을 사용하면 함수 컴포넌트에서 Redux 스토어의 상태를 쉽게 사용할 수 있습니다.

useSelector 훅과 connect 함수의 차이점은 다음과 같습니다.

1. useSelector는 함수 컴포넌트에서 사용되며, connect 함수는 클래스 컴포넌트에서 사용됩니다.
2. useSelector는 선택한 상태값만 반환하므로, 컴포넌트에서 사용할 props를 명시적으로 정의할 필요가 없습니다. 반면 connect 함수는 mapStateToProps 함수를 사용하여 상태를 props로 매핑해주어야 합니다.
3. useSelector를 사용하면 선택된 상태값이 변경되었을 때 해당 컴포넌트만 다시 렌더링됩니다. 반면 connect 함수를 사용하는 경우, 상태값 변경시 모든 연결된 컴포넌트가 다시 렌더링됩니다.

따라서 함수 컴포넌트를 작성할 때는 useSelector 훅을 사용하는 것이 좋습니다. 만약 클래스 컴포넌트를 사용해야 한다면 connect 함수를 사용해야 합니다.