프론트엔드 상태 관리 아키텍처 개선기

// [패턴 1] CSInquireModal.tsx - 컴포넌트가 비즈니스 로직의 일부를 소유
const CSInquireModal: React.FC<CSInquireModalProps> = (props) => {
  const store = useStoreFactory(CSInquireModalStore);

  // 컴포넌트의 이벤트 핸들러가 스토어의 내부 동작을 모두 알고 순차적으로 호출
  const handleOnChangeTypeInquiry = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = e.target.value;
    // ...
    store.setTypeCategoryItemList(selectedValue); // 1. 하위 카테고리 목록 세팅
    store.setTypeGroupIndex(selectedValue);       // 2. 상위 카테고리 인덱스 세팅
    store.initRequestItemIndex();                 // 3. 하위 카테고리 선택 값 초기화
  };

  return (
    <select onChange={handleOnChangeTypeInquiry}>
      {/* ... */}
    </select>
    {/* ... */}
    <input
      type="text"
      name="inquiryTitle"
      onChange={store.handleInputChange} // 스토어의 액션을 그대로 연결
    />
  );
};

// [패턴 2] CSInquireModalStore.ts - 스토어가 비즈니스 로직의 다른 일부를 소유
class CSInquireModalStore extends ModalStore<unknown> {
  // ...
  // 스토어가 직접 이벤트 핸들러를 소유하며 비즈니스 로직을 처리
  @action.bound
  handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = e.target;
    // ... 유효성 검사 및 상태 업데이트 로직 ...
  }
}

class CelebGroundPageStore {
  // 1. 서버에서 받아온 데이터
  @observable private _ground: CelebGroundModel = { ... };

  // 2. 서버와 무관한 순수 UI 상태
  @observable private _isDrawerVisible = false;
  @observable private _activeKey = '';

  // 3. API 호출 후, 클라이언트 데이터를 직접 조작하여 동기화하는 로직
  @action.bound
  async unfollowUser() {
    await this.api.unfollow();
    this._ground.followingYn = 'N'; // 상태를 직접 변경
  }

  // 4. 데이터 재검증을 위한 포괄적인 액션
  @action.bound
  async fetchGroundInfo(shopId: string) { /*...*/ }
}

class CelebArtworkTabStore extends ListStore<CelebArtworkModel> {
  @action.bound
  async fetchArtworks(artistMemberNo, params, isInit) {
    this.setIsLoading(true); // 1. 로딩 시작 (수동)
    try {
      const response = await api.fetchCelebArtworks(artistMemberNo, params);
      // ... 데이터 가공 및 저장 (수동) ...
    } catch (e) {
      this.error = e; // 2. 에러 처리 (수동)
    } finally {
      this.setIsLoading(false); // 3. 로딩 종료 (수동)
    }
  }
}

// [Before] components/.../CelebProductTab.tsx (MobX ver.)
const CelebProductTab: React.FC<CelebProductTabProps> = observer(() => {
  // 기능 하나를 위해 여러 스토어의 존재와 관계를 모두 알아야 함
  const {
    celebGroundPageStore,
    celebProductSidebarStore,
    celebProductTabStore,
  } = useRootStore();

  // 컴포넌트가 '어떻게' 데이터를 가져올지 모든 과정을 지시
  const onFilterChanged = async (param: GetArtworkProductListParam) => {
    celebProductSidebarStore.setPageNo(1);
    celebProductSidebarStore.setListParamAndUrlQuery();
    // ... 라우터 조작 ...
    await celebProductTabStore.fetchProducts(/*...*/);
  };
  // ...
});

// [Before] stores/CelebProductTabStore.ts
class CelebProductTabStore extends ListStore<CelebProductModel> {
  // 모든 API 호출에 반복되는 수동 로딩/에러 처리 로직
  @action.bound
  async fetchProducts(/*...*/) {
    this.setIsLoading(true);
    try {
      /*...*/
    } catch (e) {
      this.error = e;
    } finally {
      this.setIsLoading(false);
    }
  }
}

// [After] data/CreatorGroundProduct/useCreatorGroundProductData.ts (Custom Hook)
// '어떻게' 데이터를 가져올지에 대한 모든 로직이 이 훅 하나에 응집됨
export default function useCreatorGroundProductData({ artistMemberNo, publicStatus, categoryIndex }) {
  const getKey = (/*...*/) => { /*...*/ };

  // SWR이 로딩, 에러, 데이터, 페이지네이션 함수를 모두 자동으로 관리하고 반환
  const { data, error, size, setSize, mutate, isLoading } = useSWRInfinite(getKey, fetcher);

  // 컴포넌트가 사용하기 편하도록 가공된 데이터만 반환
  const productList = data ? [].concat(...data.map(page => page.productlist)) : [];
  return { productList, isLoading, size, setSize, mutate };
}

// [After] components/.../CelebProductTab.tsx (SWR ver.)
const CelebProductTab: React.FC<CelebProductTabProps> = (props) => {
  // 필터 상태는 서버 데이터와 분리된 단순한 UI 상태로 관리
  const { productPublicStatus, currentProductCategoryIndex } = useContext(TabContext);

  // 단 한 줄로 필요한 모든 서버 상태와 관련 함수를 '선언적으로' 얻음
  // 컴포넌트는 더 이상 '어떻게' 데이터를 가져올지 고민하지 않음
  const { productList, loading, size, setSize, mutate } = useCreatorGroundProductData({/*...*/});

  // 데이터 변경 후, 컴포넌트는 '갱신이 필요하다'는 사실만 알리면 끝
  const handleRefresh = () => mutate();

  if (loading && !productList.length) return <Loading />;

  return (
    <InfiniteScroll next={() => setSize(size + 1)} {/*...*/}>
      {productList.map(product => <CelebProductItem onUpdated={handleRefresh} />)}
    </InfiniteScroll>
  );
};