SSOT(Single Source of Truth)

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

프론트엔드 개발

대상자

• *프론트엔드 개발자** (React 프레임워크 사용자, 상태 관리에 관심 있는 개발자)
• *난이도**: 중간 (React 상태 관리 및 아키텍처 이해 필요)

핵심 요약

• SSOT 원칙은 데이터 일관성 유지와 모순 방지를 통해 시스템의 신뢰성과 유지보수성 향상을 도모한다.
• React에서 SSOT 실현 방법은 상태 끌어올리기, 전역 상태 관리 도구(Recoil, Redux 등), Context API 사용이다.
• Context API는 상태 공유 도구이지만, SSOT 구조 자체를 보장하지는 않는다.

섹션별 세부 요약

1. SSOT 개념 정의

• SSOT는 데이터의 정확한 출처가 하나 있어야 한다는 원칙으로, 중복/모순 문제 해결에 중점.
• 예: 실시간 데이터, 사용자 상태, 폼 입력 등에서 동기화 문제 예방 효과.

2. SSOT의 주요 이점

• 데이터 일관성 유지:

- 동일 데이터가 한 곳에서만 관리되어 버그 예방 가능.

- 예: 장바구니 상태가 하나의 store/context/component에서만 관리.

• 예측 가능한 상태 관리:

- 데이터 변경 위치가 명확해 디버깅 및 추적 용이.

• 유지보수 및 확장성:

- 수정이 필요한 출처가 하나뿐이므로 리팩토링/테스트 간소화.

3. React에서 SSOT 실현 방법

• 상태 끌어올리기(Lifting State Up):

- 동일 데이터는 공통 조상 컴포넌트에 집중 관리.

- 예: App 컴포넌트에서 cartItems 상태 관리.

• 전역 상태 관리 도구 사용:

- Recoil, Zustand, Redux 등으로 앱 전역의 상태를 중앙 저장소(store/atom)에서 관리.

- 예: useCartStore 생성 후 addItem, removeItem 함수로 상태 조작.

• Context API:

- 로그인 상태, 테마 설정 등 전역 상태 공유에 활용.

- CartItemContext.Provider로 상태 전달 후 useContext로 접근.

- 단, Context는 상태 공유 도구일 뿐 SSOT 구조를 보장하지 않음.

4. API 서버가 SSOT가 되는 조건

• API 서버가 DB와 직접 연결하고, 클라이언트가 서버를 통해만 접근하는 경우.
• 예외 상황:

- 프록시 역할: 외부 결제/배송 시스템과 통신 시 SSOT는 외부 시스템.

- 비동기 동기화: 클라이언트 캐시가 서버보다 최신인 경우 임시 SSOT 역할 수행.

- 분산 시스템: 마이크로서비스 아키텍처에서 각 서비스가 자체 DB를 가짐.

5. SSOT 실현 도구 및 기법

• React Query(TanStack Query):

- 서버 데이터를 클라이언트 캐시에 저장 후 SSOT처럼 취급.

• 전역 상태 관리 라이브러리:

- Zustand, Recoil, Redux 등으로 전역 상태를 하나의 저장소에서 관리.

• Context API:

- 상위 컴포넌트에서 데이터 패칭 후 하위 컴포넌트에 Context로 전달.

결론

• React에서 SSOT를 실현하려면 상태 끌어올리기, 전역 상태 관리 도구, Context API 활용.
• Context API는 상태 공유 도구이지만, SSOT 구조 자체는 보장하지 않음.
• API 서버는 상황에 따라 SSOT가 될 수 없음 (프록시, 분산 시스템, 캐시 등).
• SSOT 원칙은 데이터 일관성, 유지보수성, 확장성 향상을 위한 핵심 설계 원칙.