reselect 알아보기

redux 앱을 위한 짱짱 라이브러리, reselect에 대해 알아보자.


1. reselect는 무엇을 위한 라이브러리인가?

Simple “selector” library for Redux inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

  • Selectors can compute derived data, allowing Redux to store the minimal possible state.
  • Selectors are efficient. A selector is not recomputed unless one of its arguments change.
  • Selectors are composable. They can be used as input to other selectors.

 


 

2. 무엇을 할 수 있는데?

redux state를 가능한 한 minimal하게 유지할 수 있다.

마치 RDBMS에서 user table이 있고 생일 attribute이 있다면, 나이는 derived attribute로 계산해주는 것과 비슷하게, 리액트 컴포넌트를 렌더링하기 위한 최소한의 값들을 state에 저장하게 하고, 거기서 계산해서 나오는 값들을 메모이제이션으로 캐싱해주는 라이브러리다.

따라서 어떤 유저가 이메일 인증을 했나, 핸드폰 인증을 했나 등을 api call로 받아와서 저장한 뒤에 이 데이터로부터 이 유저가 어떤 행동을 할 수 있는 authorization의 범위를 제한한다던가. 이게 그 때 그때 계산하기 귀찮아서 state에 때려박는 경우가 많았지만, 사실 그건 뭔가 깔-끔하지가 못 하잖아?


 

3. 그래서 좋은 점은?

  1. 최소한의 state만을 간직하면서 reselect를 사용하지 않는 경우를 생각해보자. 그렇다면 어떤 컴포넌트의 render()가 불릴 때 마다 함수 안에서 state로 부터 값을 계산해내야한다. selector는 pure function으로 짜여지기 때문에 이전에 특정 상태에 대해서 캐싱을 해놨다면 그것을 그대로 가져와서 쓸 수 있어서, 버벅임이 확연하게 줄어들게 된다는 것.특히 리스트를 렌더링해줄 때 많은 도움이 되는 듯 하다. (render가 콜 될 때 마다 리스트 순회하면서 어떤 값들을 계산하고 싶지 않다면!ㅎ)
  2. 다른 곳에서 정의한 selector를 가져다 쓸 수 있다. 따라서 derived value를 계산해내는 데에 코드 중복을 피할 수 있다는 것은 꽤 큰 장점.
  3. 셀렉터끼리 조합할 수 있다는 점에서, selector를 적당히 쪼개다보면 구조적으로 잘 나뉘어질 수 밖에 없다. 이는 더 나은 유연함을 제공하며 결과적으로 리팩토링하기 정말 쉬워진다.

 

redux를 처음 접하는 사람은 redux의 개념을 충분히 이해하기도 전에 selector를 짜야한다는 것에 큰 부담을 느끼는 것은 아닐까 싶어서 redux를 조금 알고 나서 써보는 게 좋은 듯. 그 중에서도 redux를 적당히 써본 뒤에 성능상에 문제가 생겼거나, 또는 더 나은 모듈화를 노린다면 반드시 써야할 라이브러리인 것 같다. 일단 이 라이브러리를 관리하는 그룹이 github.com/reactjs 라는 것에서 (…)

 

Leave a Reply