UI와 비즈니스 로직을 분리하는 Reactjs

UI와 비즈니스 로직을 분리하는 Reactjs

대응이 처음이라 UI와 함께 많은 기능과 변수 초기화가 넘쳐나는 컴포넌트를 보는 것이 눈에 거슬립니다.분리할 수 있나요?

다음과 같은 기본 설정 대신.비즈니스 로직을 다른 파일로 분리하려면 어떻게 해야 합니까?

function MyComponent() {
    const [data, setData] = useState('');
    const someFunc = () => {
        //do something.
    };
    ... some 100-liner initializations

   return ( 
       ...
   )
}

네, 가능합니다.그것은 라고 불립니다.Separation of concern.

다음과 같이 구성 요소 구조를 생성할 수 있습니다.

MyComponentDirectory
 - useCustomHook
 - Component
 - helper

코드는 이것과 같을 것입니다.

후크

const useCustomHook = () => {

const [value, setValue] = useState('');
    const handleClick = (value) => {
        setValue(value)
        //do something.
    };
    ... some 100-liner initializations/business logic, states, api calls. 

return {
value, 
handleClick,
... // Other exports you need. 
} 
}

export default useCustomHook; 

요소

function MyComponent() {
    const {
     value, 
     handleClick, 
    ... // Other imports 
    } = useCustomHook() 

   return ( 
       <Element value={value} onClick={handleClick} />
   )
}

도우미

const doSomething = () => {}

편집

다음은 다음을 사용한 React 카운터 애플리케이션의 자세한 예입니다.Separation of concern

구조.

Directory
- App
- Counter
- useCounter
- helper

앱 컴포넌트

import Counter from "./Counter";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

카운터 컴포넌트

import useCounter from "./useCounter";

const Counter = () => {
  const { count, increaseCount, decreaseCount } = useCounter();

  return (
    <div>
      <p>{count}</p>
      <div>
        <button onClick={increaseCount}>Increase</button>
        <button onClick={decreaseCount}>Decrease</button>
      </div>
    </div>
  );
};

export default Counter;

use카운터 훅

import { useState } from "react";
import numberWithCommas from "./helper";

const useCounter = () => {
  const [count, setCount] = useState(9999);

  const increaseCount = () => setCount(count + 1);
  const decreaseCount = () => setCount(count - 1);

  return {
    count: numberWithCommas(count),
    increaseCount,
    decreaseCount
  };
};

export default useCounter;

도우미 기능

const numberWithCommas = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

export default numberWithCommas;

다음은 Codesandbox의 작업 예입니다.

주의: 후크 대신 간단한 Javascript util 함수를 만들면 다른 후크, 그 함수의 컨텍스트에 액세스할 수 없습니다.

제가 사용하는 일반적인 접근법은 비즈니스 로직을 자체 파일로 분리하는 것입니다.myComponentHelper.js

또한 함수를 인수로 전달하고 변경을 반환하지 않으면 반응 상태를 사용하거나 변경할 수 없기 때문에 함수를 테스트하기 쉬워집니다.

myComponent/
  myComponent.jsx
  myComponentHelper.js
  myComponentTest.js

// myComponent.js

import { someFunc } from './myComponentHelper';

function MyComponent() {
    const [data, setData] = useState('');
    
    const x = someFunc(data);

    return ( 
        ...
    )
}

// myComponentHelper.js

export const someFunc = (data) => {
    //do something.
    return something;
}

// myComponentTest.js

import { someFunc } from './myComponentHelper';

test("someFunc - When data is this - Should return this", () => {
    const data = {...};
    const result = someFunc(data);
    expect(result).toEqual("correct business data");
});

비즈니스 로직을 다른 파일로 분리하는 방법은 다양합니다.

1. 논리 또는 기본적으로 대응하는 파일에 필요한 함수를 가진 helperFile.js를 만듭니다.
2. 사용자 지정 후크를 만드는 중입니다.자세한 내용은 공식 문서 또는 이 재생목록에서 확인할 수 있습니다(마지막 동영상 참조).
3. 글로벌 상태 관리 방법 - 컨텍스트에서API 또는 Redux는 상태와 비즈니스 로직을 분리하기 위해 사용됩니다.

언급URL : https://stackoverflow.com/questions/69332889/reactjs-separation-of-ui-and-business-logic