state management에서 selector와 memoization이란 무엇인가요?

Question

Accepted Answer

**Selector**는 **state로부터 특정 데이터를 읽어(파생) 오는** 함수입니다. **Memoization**은 selector의 결과를 캐시하여 입력이 바뀔 때만 재계산하게 합니다 — selector가 비싼 작업을 하거나 불필요한 리렌더링을 피해야 할 때 성능상 중요합니다.

## 기본 selector — state 접근을 캡슐화

```js
// selector는 state 형태에서 값을 어떻게 꺼낼지를 앎
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // 파생
```

selector는 state 구조에 대한 지식을 중앙화합니다. 컴포넌트는 어디에/어떻게 저장되는지 모른 채 `selectCartTotal(state)`을 요청하므로, state 형태가 바뀌면 모든 컴포넌트가 아니라 selector 하나만 갱신하면 됩니다.

## 문제: 파생 selector는 호출할 때마다 재계산됨

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // items가 안 바뀌어도 매번 실행됨
```

새 배열/객체를 생성하는 selector는 호출할 때마다 **새 참조**를 반환합니다 — 이는 불필요한 리렌더링을 유발하고(React가 "새" 값으로 봄) 연산을 낭비할 수 있습니다.

## 해결책: 메모이즈된 selector(Reselect)

```js
import { createSelector } from "reselect"; // 또는 RTK의 createSelector

const selectActiveSorted = createSelector(
  [state => state.items],                       // 입력 selector(들)
  (items) => items.filter(i => i.active).sort(compareFn) // items가 바뀔 때만 재계산
);
```

`createSelector`는 결과를 캐시하고, 입력(`state.items`)이 실제로 바뀔 때만 비싼 연산을 다시 실행합니다 — 그렇지 않으면 **같은 참조**를 반환하여 재계산과 하위 리렌더링을 모두 방지합니다.

## selector 합성

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // 다른 selector 위에 구축
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

selector는 합성되어, 단순하고 개별적으로 캐시된 조각들로부터 복잡한 파생을 만듭니다.

## 왜 중요한가

selector는 컴포넌트를 state의 형태로부터 분리하고(유지보수의 이점), 파생 데이터를 표현할 단일 장소를 제공합니다.

memoization은 파생 selector를 효율적으로 만듭니다 — 반복되는 비싼 연산을 피하고, 결정적으로 안정적인 참조를 반환하여 연결된 컴포넌트가 불필요하게 리렌더링되지 않게 합니다.

Redux/NgRx 앱에서 메모이즈된 selector(Reselect/`createSelector`)는 핵심 성능 및 아키텍처 도구입니다. 동일한 캐싱 아이디어는 다른 곳에서 `useMemo`와 `computed`로 나타납니다.