Reselect 를 이용한 Redux 최적화

---

아니 왜 난 Redux를 사용 할 줄 안다고 생각했는데 Reselect에 대해 몰랐지?

---

React에서 가장 시간이 오래 걸리는 작업 중 하나가 바로 렌더링 싸이클이다. 렌더링 싸이클은 state 나 props가 변경되면 실행. 불필요하게 깊숙하게 들어가는 것을 방지하기 위해 ShouldComponentUpdate 와 Immutable 등 최적화 방법이 제안됨. reselect는 또다른 최적화 방법이다.
서문 출처

reselect 패키지

리덕스에서 저장된 데이터를 화면에 보여줄 때는 다양한 형식으로 가공할 필요가 있다.
(정렬, 필터 등...)

• reselect 패키지를 이용해 데이터 가공.

• createSelect 함수를 이용해 선택자 함수를 만든다.

• reselect 패키지는 메모제이션 기능이 있다

• selector을 한 파일에 보관하고 관리하는데 이때 한 파일 내에 있는 selector가 갱신되면 다른 selector도 갱신된다. 필요하지않은 렌더링 소모가 발생됨
  -> reselect 메모제이션이 성능 향샹

---

Selector

store에 저장하는 action을 setter, selector을 getter에 비유

selector는 store에 저장된 state에서 필요한 data를 선별적으로 가져간다

하지만 그냥 selector를 사용하다보면 state값이 변경될때 마다 selector가 실행되어서 성능상 이슈가 발생한다.

Reselect

이 문제를 해결해주는 것이 reselect이다.

• 캐싱을 통해 동일한 계산 방지

참고글