웹 프론트엔드 프레임워크의 관심사 분리 개선

요즘 점점 더 다양한 소프트웨어 아키텍처 패러다임을 연구하고 연구하고 내 코드에서 관심사 분리 및 분리를 개선하는 더 나은 방법을 찾는 것을 좋아합니다. 프런트 엔드 웹 프레임워크/라이브러리 중 일부는 독단적이며 Angular와 같은 한 방향으로 안내하고 다른 것들은 코드를 구성하는 방법에 대해 매우 관대하고 자유롭습니다.

문제

저는 몇 년 동안 React를 전문적으로 사용해 왔으며 점점 더 많이 Context 및 Hooks를 사용하여 UI 구성 요소에서 상태 및 비즈니스 로직을 분리했습니다. 최근에 저는 이 작업을 수행하기 위해 싱글톤을 사용하는 다른 접근 방식으로 LogicRoom의 예를 접했고 생각하게 되었습니다... 프레임워크에 구애받지 않기 때문에 매우 흥미롭습니다. 따라서 React에서 Svelt로 이동하려는 경우 작업이 더 쉬워질 것입니다. .

하지만 저는 토론을 시작하고 외부 사람들에게 묻고 싶었습니다. 주제에 대한 귀하의 의견은 무엇입니까? 귀사에서는 이것이 어떻게 이루어지나요? 인생에서 여느 것과 마찬가지로 하나의 정답은 없으며 모든 것은 균형입니다. 저는 React에 대한 논리가 곧 사라질 것이라고 생각하지 않기 때문에 React에 대한 제 논리가 강화되는 것을 신경 쓰지 않습니다. 그래서 당신이 그것에 대해 말해야 할 것을 듣게 해주세요!

예

예를 들어 보겠습니다... 첫 번째는 상태를 추적하기 위해 제안된 싱글톤입니다(전체 CodeSandbox에 대한 링크도 있고 포함하려고 시도했지만 계속 svg 오류가 발생했습니다... =/) 두 번째는 관리할 상태와 내 구성 요소에서 액세스할 수 있는 후크를 사용하여 공급자를 작성하는 방법입니다.

하나씩 일어나는 것

class External {
  constructor() {
    this.left = 0;
    this.right = 0;
    this.finalCall = null;
  }

  registerFinalCall = (finalCall) => {
    this.finalCall = finalCall;
  };

  doFinalCall = () => {
    this.finalCall(Number(this.left) + Number(this.right));
  };
}

export const external = new External();

Full Example

반응 컨텍스트

import { createContext, useContext, useState, useMemo } from "react";

const SumContext = createContext({
  setLeft: () => {},
  setRight: () => {},
  total: 0
});

export function useSum() {
  return useContext(SumContext);
}

export function ProvideSum({ children }) {
  const [left, setLeft] = useState(0);
  const [right, setRight] = useState(0);

  const total = useMemo(() => left + right, [left, right]);

  return (
    <SumContext.Provider value={{ setLeft, setRight, total }}>
      {children}
    </SumContext.Provider>
  );
}

export default SumContext;

Full Example