derived state(파생 state)란 무엇이며 왜 중복 저장을 피해야 하나요?

Question

Accepted Answer

**Derived state(파생 state)**란 별도로 저장하는 대신 **기존 state로부터 계산할 수 있는** 값을 의미합니다. 원칙은 이렇습니다: 계산할 수 있다면 저장하지 말고, 매 렌더링마다 파생하라. 파생 가능한 값을 저장하면 서로 어긋나기 쉽습니다.

## 안티패턴: 계산할 수 있는 것을 저장하기

```jsx
// ❌ 파생 값을 별도 state로 저장
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // 중복 — items로부터 파생 가능

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // total도 갱신해야 함 — 깜빡하기 쉬움 🐛
  }
}
```

이제 `total`은 이미 `items`에 있는 정보의 두 번째 복사본입니다. `items`가 바뀔 때마다 `total`도 *반드시* 갱신해야 하며, 하나라도(제거, 수량 변경) 놓치는 순간 서로 어긋나서 UI가 잘못된 합계를 보여줍니다.

## 해결책: 렌더링 시 파생하기

```jsx
// ✅ items로부터 total 계산 — 항상 정확, 절대 어긋나지 않음
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // 매 렌더링마다 파생

function addItem(item) {
    setItems([...items, item]); // 한 번의 갱신; total은 자동으로 다시 계산됨
  }
}
```

`total`을 파생하면 추가로 동기화할 것이 없습니다. `items`를 바꾸면 total은 항상 정확합니다.

## 계산이 비쌀 때만 메모이제이션

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // 비싼 파생
  [items]                                            // items가 바뀔 때만 재계산
);
```

무거운 파생(큰 필터/정렬)의 경우 `useMemo`/`computed`/selector가 결과를 캐시하여 의존성이 바뀔 때만 재계산합니다. 하지만 여전히 *파생*된 것이지 독립적인 state로 저장된 것이 아닙니다.

## 흔한 파생 값

```text
합계/개수, 필터링되거나 정렬된 목록, first+last로 만든 fullName,
폼 필드로 만든 isValid, 서식이 적용된/표시되는 문자열, "전부 선택되었는가?"
```

## 왜 중요한가

파생 state를 중복 저장하지 않는 것은 single-source-of-truth를 직접 적용한 것으로, 복사본이 어긋나는 버그 전체를 제거합니다.

"저장하지 말고 파생하라"는 규칙은 state를 최소한으로 유지하고 UI를 구조적으로 일관되게 만듭니다.

무엇이 파생 가능한지 인식하고(그리고 `useMemo`/computed/selector는 오직 성능을 위해서만 쓰고, 결코 두 번째 진실 공급원을 만들기 위해 쓰지 않는 것)은 깨끗하고 버그에 강한 state 설계의 특징입니다.