SSOT (Single Source of Truth)

호이초이·2025년 5월 16일

오늘 수업을 하면서, codeSandbox1 에 존재하는 코드를 바탕으로 에러를 디버깅해보는 연습을 했다.

여기서의 문제는 Header 컴포넌트의 상태와 ProductList의 상태가 동기화되지 않았던 것이었다.
즉, ProductList에서 이벤트 핸들러가 발생하면 해당 장바구니 아이템의 상태를 업데이트해주지만, Header에서는 또 별개의 장바구니 상태를 따로 관리하고 있었기 때문에, 이 둘이 서로 다른 데이터를 보여주는 문제가 발생했다.

👉 이 상황 자체가 바로 SSOT(Single Source of Truth), 즉 진실의 원천이 하나여야 한다는 원칙이 깨진 예시이다.

그럼 SSOT가 뭘까?

📘 SSOT란?

SSOT(Single Source of Truth)는 말 그대로, “진실은 하나의 출처만 있어야 한다”는 개념

개발에서는 특정 데이터나 상태에 대해 1 군데에서만 관리하고, 다른 곳은 그것을 참조만 하게 하는 것

🫥 비유
학교에 출석부가 두 개 있는 상황

담임 선생님의 출석부에는 민수가 결석

체육 선생님의 출석부에는 민수가 출석
이렇게 서로 다른 정보를 갖고 있으면, 무엇이 진짜인지 알 수 없고 혼란만 생긴다.

→ 그래서 반드시 하나의 출석부만을 ‘진실의 원천’으로 정해야 한다.

🔥 React에서 SSOT를 지키는 방법은?

1. 상태(state)의 SSOT 유지 전략

A. 최상위 컴포넌트에서 useState로 관리 + props 전달 (상태 끌어올리기)

가장 직관적이고 기본적인 방식
단점: 깊은 컴포넌트 구조에서는 props drilling이 발생함 (Context API 사용시 해결 가능)

B. 전역 상태관리 라이브러리 사용

Redux, Zustand, Recoil, Jotai 등
각각 장단점이 있으나 공통적으로 SSOT 구현에 최적화된 store 구조를 제공함

Q. 여기서 든 의문! 단순히 React에서는 상태만 SSOT 원칙을 지키면 되는걸까? → ❌
A. SSOT는 상태(state)뿐 아니라, 어떤 값이 변경되거나 의존될 수 있는 모든 것에 대해 적용 가능한 원칙

2. 상태 외의 SSOT 유지 전략

A. 변수

일반 변수는 React의 렌더링 흐름에 감지 ❌
중앙 집중식으로 관리 필요시, config 또는 constants 파일을 만들어 SSOT처럼 관리 가능
ex) PRODUCTS, ENDPOINTS, USER_ROLE 같은 전역 상수

B. 함수

같은 논리를 여러 곳에서 쓰면 복붙 위험 → 공통 유틸 함수로 분리
ex) utils/, lib/, hooks/ 디렉토리로 관리

C. UI 컴포넌트

반복되는 UI 하드코딩 ❌ → 컴포넌트화
ex) <Button variant="primary" /> 형태로 재사용

D. 서버 데이터

서버가 진실의 원천이어야 할 경우, 클라이언트에서 캐싱하거나 임의로 상태를 수정하면 SSOT가 깨짐
이 경우엔 React Query, SWR 등의 도구를 사용해 server state의 SSOT를 관리할 수 있음

그럼 codeSandbox1의 문제를 해결하려면?

문제 원인 분석

App.tsx → Header와 ProductList를 각각 렌더링
ProductList는 자체적으로 장바구니 상태를 관리 (useState)
Header도 따로 장바구니 개수를 표시하기 위해 또 다른 상태를 관리

상태가 두 개의 진실로 나뉘면서 동기화가 깨진 것.

✅ 해결 방법 – 하나의 진실 만들기

React에서는 이런 문제를 방지하기 위해 공통된 상태는 상위 컴포넌트에 올려 관리하는 것이 정석이다.

개선 (codeSandbox2)

// App.tsx
const [cartItems, setCartItems] = useState<CartItemType[]>([]);

// 상태를 Header와 ProductList에 props로 전달
<Header cartItems={cartItems} />
<ProductList cartItems={cartItems} setCartItems={setCartItems} />

이렇게 하면 모든 컴포넌트가 동일한 데이터를 바라보게 되어, 어디서 수정하든 상태가 유지되고 동기화 문제도 발생하지 않는다.

📝 정리

SSOT(Single Source of Truth)는 "진실의 원천은 단 하나여야 한다"는 원칙으로, 데이터의 신뢰성과 시스템의 일관성을 확보하는 핵심 개념이다.
상태는 가능하면 상위 컴포넌트에서 하나로 관리하고 하위 컴포넌트로 props나 context를 통해 전달해야한다.
상태 외에도, 함수, 변수, 컴포넌트, 서버 데이터 역시 SSOT 관점에서 관리되어야 한다.