FE 개발에서 Single Source of Truth (SSOT) 알아보기 👍

현대 웹 애플리케이션 개발에서 데이터 관리의 복잡성은 날로 증가하고 있다.

 

특히 React와 같은 UI 라이브러리를 사용할 때, 점점 더 많은 데이터들을 FE에서 관리함에 따라,

데이터 흐름을 효과적으로 관리하는 것은 필수가 되었다.

 

이때 등장하는 개념 중 하나가 바로 Single Source of Truth (SSOT)이다.

나도 개인적으로 몇번 들어봤던 개념인데, 정확하게 이해하고 넘어가고자 글로 남겨보기로 했다 👍

 

이 글에서는 SSOT의 기본 개념, React 앱에서 이를 구현하는 방법, 그리고 장단점을 알아보았다.

 

Single Source of Truth란?

 

원본 데이터의 출처는 단 한곳

 

Single Source of Truth는 간단히 말해 애플리케이션의 데이터가 단 하나의 신뢰할 수 있는 출처에서 관리된다는 것을 의미한다.

 

이는 데이터를 중복 저장하지 않고, 데이터의 상태를 한 곳에서만 업데이트하거나 조회할 수 있도록 설계하는 것으로 구현할 수 있다.

 

이를 통해 데이터의 일관성을 유지하고, 데이터 변경 시 발생할 수 있는 혼란을 방지한다.

(SSOT는 데이터가 항상 단일한 장소에서만 존재하며, 이를 통해 모든 관련 시스템이 동일한 정보를 참조할 수 있도록 보장하도록 한다)

 

이를 React의 관점에서 보면, 애플리케이션 상태(state)를 관리하는 하나의 중앙화된 스토어를 떠올릴 수 있다.

 

 

React에서 SSOT의 필요성

React에서 데이터가 여러 소스에서 관리되면 다음과 같은 문제가 발생할 수 있다.

• 일관성 부족
    여러 컴포넌트에서 동일한 데이터를 관리하면, 서로 다른 값으로 인해 버그가 발생할 가능성이 높아짐
    (데이터 업데이트 시 모든 source의 데이터 전부 업데이트 필요 😅)
• 복잡성 증가
    데이터를 중복 관리하면 코드의 복잡성이 증가하고, 유지보수가 어려워짐
• 디버깅 어려움
    데이터 변경의 출처를 추적하기가 어려워짐
    (여러 store가 있다면, 어디서 데이터가 잘못되었는지 찾아야 한다)

SSOT 원칙을 적용하면 이러한 문제를 효과적으로 해결할 수 있다.

 

React에서 SSOT 구현하기 (여러 전역 Store 구현 방법들)

1. Context API와 useReducer

React의 Context API는 상태를 컴포넌트 트리 전체에 공유하기 위한 도구이다.

이를 useReducer와 함께 사용하면 SSOT를 간단히 구현할 수 있다.

 

import React, { createContext, useReducer, useContext } from 'react';

type State = {
  user: string | null;
  theme: 'light' | 'dark';
};

type Action =
  | { type: 'SET_USER'; payload: string }
  | { type: 'SET_THEME'; payload: 'light' | 'dark' };

const initialState: State = {
  user: null,
  theme: 'light',
};

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_THEME':
      return { ...state, theme: action.payload };
    default:
      return state;
  }
};

const AppStateContext = createContext<[State, React.Dispatch<Action>] | undefined>(undefined);

export const AppStateProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <AppStateContext.Provider value={[state, dispatch]}>
      {children}
    </AppStateContext.Provider>
  );
};

export const useAppState = () => {
  const context = useContext(AppStateContext);
  if (!context) {
    throw new Error('useAppState must be used within AppStateProvider');
  }
  return context;
};

사실, context api와 useReducer가 결합된 형태가 redux이다..

 

2. Redux 또는 Zustand와 같은 상태 관리 라이브러리

더 복잡한 애플리케이션에서는 Redux와 같은 상태 관리 라이브러리를 사용하는 것이 SSOT 구현에 유리하다.

Redux는 중앙 스토어를 사용하여 애플리케이션 상태를 관리하며, 상태의 흐름이 명확하게 정의된다.

(Redux에서는 데이터의 흐림이 한 방향이기에 데이터 변경 시 흐름을 파악하기에 용이하다)

import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';

type AppState = {
  user: string | null;
  theme: 'light' | 'dark';
};

const initialState: AppState = {
  user: null,
  theme: 'light',
};

const appSlice = createSlice({
  name: 'app',
  initialState,
  reducers: {
    setUser: (state, action: PayloadAction<string>) => {
      state.user = action.payload;
    },
    setTheme: (state, action: PayloadAction<'light' | 'dark'>) => {
      state.theme = action.payload;
    },
  },
});

export const { setUser, setTheme } = appSlice.actions;

const store = configureStore({
  reducer: appSlice.reducer,
});

export default store;

다만, Redux는 구조가 복잡해서 요즘에는 zustand를 사용해서 더 짧고 간편하게 코드를 작성하는 추세인듯.

 

https://zustand.docs.pmnd.rs/getting-started/introduction

Introduction - Zustand

 

SSOT의 장단점

장점 👍

1. 데이터 일관성 유지 
   데이터가 단일 출처에서 관리되므로, 일관성이 보장된다.
2. 디버깅 용이
   상태 변경의 출처를 쉽게 추적할 수 있다.
3. 유지보수성 향상
   데이터의 흐름이 명확하여 코드를 이해하고 수정하기가 쉽다.

단점 ❓

1. 초기 복잡성 증가
   SSOT를 구현하려면 초기 설정과 학습이 필요하다.
   (특히 redux를 사용한다면 더더욱)
2. 성능 문제
   대규모 애플리케이션에서는 상태 업데이트로 인해 성능 저하가 발생할 수 있다.
   (잘 최적화 해야한다. 특히 context api)

길게 작성했지만, 어찌보면 개발을 할 땐 당연히 지켰던 원칙인 것 같다.

새삼스럽게 써놨지만, 이젠 웬만한 React FE 개발에서는 전역 스토어 라이브러리를 사용하기에 자연스레 지켜지는 SSOT 원칙인 것 같다.

(굳이 전역 store를 만들어놓고 같은 데이터를 다른 곳에 저장하는 일은 거의 없을 듯)

그래도 개발을 할 때 의식을 하고 하나의 source를 지키도록 명심해야 나중의 에러를 방지하는데 있어서 도움이 될듯 싶다 👍

 

👻 참고 자료 

https://en.wikipedia.org/wiki/Single_source_of_truth

Single source of truth - Wikipedia