1. 추론해보기

1.1. SSoT란 무엇이고 왜 중요할까?

원천은 진실되어야한다, 상태를 서로 다르게 가공해도 결국 원천은 같아야한다는 뜻인 것 같다.

그렇지 않으면 동기화 상태가 깨질 수 있고, 기능 구현도 유지보수도 어려워지며 예측하지 못한 동작이 발생할 수 있을 것 같다.

1.2. 리액트에서 SSoT는 어떻게 적용될 수 있을까?

하나의 State에 파생 상태를 만들거나 상태가 다른 컴포넌트에서 동기화 되어야할 때 엄격하게 적용해볼 수 있을 것 같다.

2. 실제 개념 정리

2.1. 개념

단일 진실 공급원이란 모든 데이터 요소의 원본(마스터)이 단 한 곳에만 존재하고, 다른 곳에서는 이 원본을 참조만 하도록 하는 정보 시스템 설계 방식입니다.

이것이 중요한 이유는 다음과 같습니다:

2.2. AI 노트 (GoogleNotebookLM, NotionAI, GPT 검색엔진)

<aside> 💡

**단일 진실 공급원(Single Source of Truth, SSOT)**은 각 데이터 요소를 한 곳에서만 관리하는 방식입니다. 이는 데이터 중복과 불일치를 방지하며, 필요할 때는 원본을 참조하는 방식을 사용합니다.

리액트에서는 이 원칙을 상태 관리에 적용합니다. 여러 컴포넌트가 상태를 공유할 때, 특정 컴포넌트가 상태를 소유하고 관리합니다.

**상태 끌어올리기(lifting state up)**는 다음 단계로 구현됩니다:

  1. 자식 컴포넌트에서 상태 제거: useState로 정의된 상태를 제거합니다.
  2. 공통 부모 찾기: 가장 가까운 공통 부모를 "진실 공급원"으로 설정합니다.
  3. 부모에 상태 추가: 공통 부모에 상태를 추가합니다. 예: 아코디언에서 isActive 대신 활성 패널 인덱스 사용.
  4. Props로 전달: 부모가 상태와 이벤트 핸들러를 자식에게 전달합니다.

이렇게 하면 제어된 컴포넌트가 됩니다. 반대로 자체 상태를 가진 비제어된 컴포넌트는 DOM을 진실 공급원으로 사용하며 ref로 접근합니다.

제어된 컴포넌트는 유연하지만 설정이 복잡하고, 비제어된 컴포넌트는 간단하지만 조정이 어렵습니다. 실제로는 두 방식을 혼합 사용합니다.

상태 끌어올리기로 부모가 상태를 관리하고 자식들은 props로 이를 반영하며 필요시 이벤트 핸들러로 변경을 요청합니다.

더 큰 시스템에서도 이 개념이 적용됩니다. 데이터 웨어하우스나 MDM은 여러 데이터를 통합 관리하고, Azure Databricks Lakehouse는 단일 시스템으로 데이터를 통합합니다. 이처럼 단일 진실 공급원은 모든 규모의 시스템에서 중요합니다.

</aside>

카멜식 재정리:

리액트에서 SSoT를 적용하는 방법은