아토믹 디자인과 플럭스 패턴

프론트엔드 개발에서 아토믹 디자인(Atomic Design)과 플럭스 패턴(Flux Pattern)은 각각 UI 설계 방식과 상태 관리 방식을 다루는 개념이다. 두 개념을 비교하고, 실제로 많이 사용하는 Redux, Zustand, Recoil과의 연관성을 설명한다.

---

1. 아토믹 디자인(Atomic Design)

✅ UI 컴포넌트를 작은 단위에서부터 조합하여 확장하는 방식

✅ 재사용성, 일관성, 유지보수성이 뛰어남

✅ 디자인 시스템 구축에 많이 활용됨

아토믹 디자인 구조

아토믹 디자인은 UI를 다음 5단계로 나눈다.

1. Atoms (원자)
   • 가장 작은 단위의 UI 요소 (예: 버튼, 입력 필드, 라벨)
   • 예시: <Button />, <Input />, <Label />
2. Molecules (분자)
   • 여러 개의 Atoms가 결합된 컴포넌트 (예: 검색창)
   • 예시: <SearchBar /> → <Input /> + <Button />
3. Organisms (유기체)
   • 여러 Molecules가 결합된 UI 블록 (예: 헤더, 카드 리스트)
   • 예시: <Header />, <CardList />
4. Templates (템플릿)
   • 전체 페이지의 레이아웃을 구성하는 단계
   • 예시: 블로그 템플릿, 대시보드 레이아웃
5. Pages (페이지)
   • 최종적으로 사용자가 보는 완성된 페이지

아토믹 디자인과 관련된 상태 관리

• Recoil은 아토믹 디자인과 잘 어울리는 상태 관리 방식이다.
• Recoil의 Atoms 개념은 아토믹 디자인의 Atoms와 유사하며, 작은 상태 단위를 독립적으로 관리할 수 있다.

---

2. 플럭스 패턴(Flux Pattern)

✅ 단방향 데이터 흐름을 기반으로 하는 상태 관리 방식

✅ 상태 변경이 예측 가능하고 디버깅이 쉬움

✅ Redux, Zustand 같은 상태 관리 라이브러리가 이를 기반으로 설계됨

플럭스 패턴 구조

플럭스 패턴은 다음과 같은 단방향 데이터 흐름을 따른다.

1. Action (액션)
   • 상태 변경을 요청하는 객체 (예: INCREMENT, ADD_ITEM)
2. Dispatcher (디스패처)
   • 액션을 받아서 Store로 전달하는 역할
3. Store (스토어)
   • 애플리케이션의 중앙 상태를 관리하는 곳
   • 상태가 변경되면 View가 업데이트됨
4. View (뷰)
   • 상태(Store)를 구독하여 UI를 렌더링
   • 상태가 변경될 때 자동으로 업데이트됨

플럭스 패턴과 관련된 상태 관리

• Redux와 Zustand는 플럭스 패턴을 따르는 상태 관리 라이브러리이다.
• Redux는 완전한 플럭스 패턴을 따르며, Zustand는 플럭스 패턴을 기반으로 더 간결한 API를 제공한다.

---

3. 상태 관리 라이브러리별 아토믹 디자인 vs 플럭스 패턴 적용

상태 관리 라이브러리	방식	설명
Redux	플럭스	Action → Store → View 흐름
Zustand	플럭스	Redux보다 간결한 Store 관리
Recoil	아토믹	상태를 작은 단위(Atoms)로 관리

🔹 Redux (Flux 패턴)

Redux는 가장 대표적인 플럭스 패턴 기반의 상태 관리 라이브러리다.

// Redux Store 예시
import { createSlice, configureStore } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

export const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

✅ Action을 통해 상태 변경을 요청하고, Store에서 변경을 반영하는 구조

✅ 중앙 집중식 상태 관리로 플럭스 패턴을 따른다.

---

🔹 Zustand (Flux 패턴)

Zustand는 Redux보다 더 간결한 API를 제공하는 상태 관리 라이브러리로, 플럭스 패턴을 기반으로 하지만 훨씬 사용이 쉽다.

import { create } from "zustand";

// Zustand Store 예시
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

const CounterComponent = () => {
  const { count, increment, decrement } = useCounterStore();
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

✅ Redux와 달리 별도의 Action을 만들 필요 없이 간결하게 상태 관리 가능

✅ 플럭스 패턴을 기반으로 하지만 Redux보다 사용이 쉬운 상태 관리 라이브러리

---

🔹 Recoil (아토믹 패턴)

Recoil은 상태를 Atoms 단위로 독립적으로 관리할 수 있어 아토믹 디자인과 매우 잘 맞는다.

import { atom, useRecoilState } from "recoil";

// Recoil Atoms 예시
const counterState = atom({
  key: "counterState",
  default: 0
});

const Counter = () => {
  const [count, setCount] = useRecoilState(counterState);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
};

✅ Atoms 개념을 활용하여 작은 단위로 상태를 관리할 수 있음

✅ 아토믹 디자인과 유사한 방식으로 상태를 관리할 수 있어 UI 구조와 잘 맞음

---

4. 결론

아토믹 디자인은 UI 설계 방식이며, Recoil과 같은 상태 관리 라이브러리와 잘 맞는다.

플럭스 패턴은 상태 관리의 흐름을 정의하는 방식으로, Redux, Zustand와 같은 라이브러리가 이를 따른다.

패턴	특징	관련 라이브러리
아토믹 디자인	컴포넌트를 작은 단위로 설계	Recoil
플럭스 패턴	단방향 데이터 흐름을 따름	Redux, Zustand

💡 프로젝트에 따라 적절한 상태 관리 라이브러리를 선택하는 것이 중요하다!

✔ Redux: 대규모 애플리케이션, 강력한 디버깅 툴 필요할 때

✔ Zustand: 간단한 상태 관리, Redux보다 가벼운 대안이 필요할 때

✔ Recoil: UI 컴포넌트별 독립적인 상태 관리가 필요할 때