"single source of truth(단일 진실 공급원)"란 무슨 의미인가요?

Question

Accepted Answer

**Single source of truth**란 각 데이터 조각이 **정확히 한 곳**에만 저장되고, 그것이 필요한 모든 곳이 그곳에서 읽어오는 것을 의미합니다. 어긋날 수 있는 여러 복사본을 두는 대신 말입니다.

## 막아주는 문제: 중복되어 어긋나는 state

```jsx
// ❌ 같은 데이터를 두 곳에 저장 → 서로 일치하지 않을 수 있음
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const [displayName, setDisplayName] = useState("Ann"); // user.name의 복사본

function rename(newName) {
    setUser({ ...user, name: newName }); // user는 갱신했지만...
    // ...displayName 갱신을 깜빡함 → 이제 서로 어긋남! 🐛
  }
}
```

같은 사실이 두 state에 존재하면, 갱신할 때마다 둘 다 바꿔야 함을 기억해야 합니다. 그리고 결국 하나를 놓쳐서 UI가 일관되지 않은 값을 보여주는 버그가 발생합니다.

## 해결책: 하나의 출처를 두고 나머지는 파생

```jsx
// ✅ user.name이 단일 출처이고, displayName은 저장이 아니라 파생됨
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const displayName = user.name.toUpperCase(); // 렌더링 시 계산 — 항상 동기화됨

function rename(newName) {
    setUser({ ...user, name: newName }); // 한 번의 갱신으로 모든 것이 일관됨
  }
}
```

표준이 되는 값은 한 번만 저장하고, 그로부터 파생 가능한 모든 것은 즉석에서 계산하세요. 동기화할 것이 아무것도 없습니다.

## 이 원칙이 적용되는 곳

```text
✓ props를 state로 복사하지 말 것(prop이 출처임)
✓ 파생 값을 저장하지 말 것(계산하라: 합계, 필터링된 목록, 서식이 적용된 텍스트)
✓ 글로벌 store(Redux/Pinia): 하나의 store가 공유 데이터의 출처
✓ 서버 데이터: 여러 컴포넌트로 복사하지 말고 한 번만 캐시(React Query)
✓ URL을 출처로: 필터/페이지를 URL에 두고 거기서 읽기
```

## 왜 중요한가

Single source of truth는 신뢰할 수 있는 state management의 기초 원칙으로, 중복된 데이터가 서로 어긋나면서 발생하는 버그 전체를 제거합니다.

이것이 바로 값을 저장하는 대신 파생하는 *이유*이고, props를 state로 복사하지 않는 *이유*이며, 글로벌 store가 공유 데이터를 중앙화하는 *이유*입니다.

데이터가 하나의 권위 있는 집을 가지고 모든 곳이 그곳에서 읽어올 때, UI는 구조적으로 일관성을 유지합니다.