프로젝트를 진행하면서 리덕스에 담아놓은 상태값을 useSelector로 끌어와서 사용했었는데, 따로 함수들을 모아놓은 파일에서 useSelector를 사용하려 하니 오류가 발생했다. 이것저것 찾아보니 getState를 사용하면 오류가 해결된다고 해서 getState로 코드를 수정했더니 오류가 해결되었다. 모르고 사용했던 부분인데 찾아보면서 알게 된 getState와 useSelector의 차이를 기록으로 남겨본다.
useSelector vs getState
공통점
useSelector와 getState는 둘 다 스토어에 저장된 상태값을 반환해주는 역할을 한다.
차이점
-
useSelector
useSelector는 리덕스의 훅중 하나로, 리액트의 Hooks API를 활용하기 때문에 리액트의 함수형 컴포넌트 안에서만 사용할 수 있다. 그리고 함수를 전달하여 필요한 상태값만 선택적으로 가져올 수 있다.상태값이 디스패치되어 변화하게 되면 useSelector는 등록된 함수를 실행시키고, 바뀐 값이 이전에 불러온 값과 다르다면 자동으로 컴포넌트를 리렌더링 시켜 새로운 값을 받아온다. 즉, 단순히 값만 불러와주는 것이 아니라 값이 달라질때마다 자동으로 업데이트도 해주는 것이다.
-
getState
getState는 redux store의 메서드이기 때문에 스토어에 접근 가능한 곳이라면 어디서든 사용할 수 있다. 다만 상태값을 가져올 때 전체 상태를 가져와야 한다. 그리고 getState를 호출할 당시의 상태값만을 불러올 수 있고 useSelector처럼 자동적으로 변화하는 상태값을 추적하여 값을 업데이트해주지는 않는다.
리액트 컴포넌트가 아니라 함수에서 useSelector를 사용하려고 하니 오류가 났던 것이었다! 그래서 컴포넌트가 아닌 곳에서도 사용할 수 있는 getState를 사용하니 오류가 해결된 것이고, 내가 getState를 사용한 곳의 경우 호출한 당시의 상태값만 불러오면 되기 때문에 문제없이 코드를 완성할 수 있었다.
👍