Redux의 셀렉터와 useSelector 훅

지난 수업에서 우리는 store에 상품 데이터를 저장했습니다. 그런데 store에서 이 데이터를 어떻게 가져와야 할까요?

이를 위해서는 셀렉터 함수를 작성해야 합니다. 이 함수는 store에 저장된 상태 값에서 특정 정보를 추출하는 방법을 알고 있으며, 애플리케이션이 커지면서 반복적인 코드 작성을 피하는 데 도움을 줍니다. 이 함수는 입력으로 state를 받고, 출력으로 필요한 상태 조각(slice)을 제공합니다. 예를 들면 다음과 같습니다:

const selectValue = state => state.some.value

교재 초반에 store에는 getState 메서드가 있다고 언급했습니다. 상태 값을 가져오기 위해 이 메서드를 쉽게 사용할 수 있었을 것입니다:

const value = selectValue(store.getState())

문제는 우리의 React 컴포넌트가 store에 직접 접근할 수 없다는 점입니다. 왜냐하면 store를 컴포넌트 파일로 가져오는 것이 금지되어 있기 때문입니다. 하지만 React-Redux의 훅인 useSelector를 사용하여 컴포넌트에서 데이터를 가져올 수 있습니다. 게다가, 이 훅을 사용하면 우리의 컴포넌트들이 항상 최신 데이터만을 받을 수 있습니다:

const count = useSelector(selectValue)