reselect 사용하기
reselect는 redux에서 selector를 사용 할 수 있도록 해주는 library 로 원본 데이터를 다양한 형태로 가공하여 사용 할 수 있도록 도와준다.우선 redux에 있는 데이터를 가져오는데 역할을 수행하는
useSelector이 가지고 있는 특징을 먼저 알아보겠다.- useSelector는 랜더링때 마다 실행된다.
- action이 dispatch 되었을 때 실행되며, 이전 state 값과 현재 state 값이 다른 경우 리렌더링이 진행된다.
첫 번째 특징에서의 랜더링 될 때 마다 실행된다는 것은 매번 재계산을 진행한 다는 것으로 데이터의 크기가 클 경우 소요 비용이 커지게 되는데, 이게 두 번째 특징과 연결되어 리랜더링이 발생 할 경우 불필요한 계산이 발생하게 되어 성능에 영향을 줄 수 있다.
위의 발생한 문제점들을 해결하는 방법으로
reselect 를 사용하게 되는데, 기본적으로 selector와 같지만 memoization 을 통해 이전 state 값을 캐시에 저장하여 불필요한 계산을 없애준다.설치
적용 방법
reselect 를 사용하는 방법은 다음과 같다이런식으로 state에서 가져온 값을 적용할 수 있으며
createSelector 에 매개변수로 전달된 값이 변경되지 않았다면 재계산을 수행하지 않게 된다.