반응형 프로그래밍을 사용한 재사용, 확장 및 테스트 가능한 상태 논리.

UI 구성요소의 상태

UI 구성 요소에 상태를 도입하기 시작할 때 다음과 같은 작업을 수행하고 싶은 유혹을 느끼는 경우가 많습니다.

Svelte의 간단한 카운터 예:

<script>
  let count = $state(0);
</script>

<button onclick="{()"> count++}>
  clicks: {count}
</button>

문제

여기에서는 Svelte를 사용하지만 이 문제는 모든 UI 프레임워크에 적용될 수 있습니다.

즉시 상태 로직을 구성 요소와 긴밀하게 연결했습니다. 증분 기능은 템플릿에 바로 코딩되어 있습니다.

이 설정을 사용하면 다음에서 카운터 로직을 재사용할 수 없습니다.

• 기타 UI 구성 요소
• 카운터가 필요한 기타 비즈니스 로직
• 기타 UI 프레임워크

또한 구성요소를 렌더링하지 않고는 카운터 로직을 테스트할 수 없습니다. 구성 요소에 다른 기능이 결합되어 있는 경우 카운터 로직을 분리하는 것은 불가능합니다.

해결책:

UI 구성요소에서 상태 로직을 분리하여 독립적으로 구현하고 테스트할 수 있습니다. 이렇게 하면 로직을 더 쉽게 재사용할 수 있으며 UI 구성 요소는 상태 변경만 수신하고 렌더링하면 됩니다. 다음을 고려하십시오:

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick="{increment}">
  Count: {$count}
</button>

StackBlitz에서 전체 예시 보기

위를 원래 예와 비교하면 이제 카운터에 대한 모든 논리가 RxCounter에 캡슐화됩니다(나중에 구현을 보여드리겠습니다).

count는 새로운 count 상태를 내보내는 RxJS Observable입니다. 증가는 상태 변경을 호출하기 위해 UI가 호출할 수 있는 작업 메서드입니다.

Svelte에는 $count 템플릿 변수에서 볼 수 있듯이 템플릿에서 관찰 가능 항목을 구독하는 멋진 내장 기능이 있습니다. 모든 UI 프레임워크에서 Observable을 구독하는 것은 크게 어렵지 않으며 많은 프레임워크에는 이를 달성하는 데 도움이 되는 API가 있습니다.

RxCounter 구현

정보 및 면책조항: 저자가 만든 Reactables API를 사용합니다. RxJS를 활용하여 반응형 프로그래밍을 더 쉽게 만드는 상태 관리 솔루션입니다.

Reactables Core Package를 다운로드하고 RxCounter를 생성하세요.

npm과 @reactables/core

import { RxBuilder } from '@reactables/core';

export const RxCounter = () =>
  RxBuilder({
    initialState: 0,
    reducers: {
      increment: (count) => count + 1,
    },
  });

RxBuilder는 Reactable을 반환합니다.

Reactable은 첫 번째 항목이 상태 변경을 방출하는 RxJS Observable이고 두 번째 항목이 상태 업데이트를 트리거하는 작업 방법 사전인 튜플입니다.

상태는 반응형입니다. 즉, 상태는 리듀서 기능을 통해 변경 사항에 반응합니다. UI에 의해 트리거된 증분 작업이 수신되면 반응 가능 반응하고 해당 관찰 가능 항목이 새로운 상태를 방출합니다.

참고 RxCounter는 이제 뷰 레이어에서 완전히 분리되어 모든 UI 프레임워크에서 사용할 수 있습니다!

카운터 테스트

Reactable을 테스트하기 위해 상태 관찰 가능 항목을 구독하고 동작 메서드를 호출하여 동작을 테스트합니다. Observable의 방출된 값이 원하는 동작과 일치한다고 주장할 수 있습니다.

이 작업은 RxJS에 내장된 Marble 테스트를 통해 수행할 수 있습니다.

<script>
  let count = $state(0);
</script>

<button onclick="{()"> count++}>
  clicks: {count}
</button>

카운터 확장

뷰에서 분리된 상태 로직을 사용하면 RxCounter의 기능을 확장하고 카운트를 두 배로 늘릴 수 있는 RxDoubleCounter를 생성할 수도 있습니다.

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick="{increment}">
  Count: {$count}
</button>

StackBlitz에서 전체 예시 보기

결론

UI 구성요소에 상태 로직을 직접 구현하면 로직을 재사용하고 테스트하기가 더 어려워집니다.

Reactable을 사용하여 상태 로직을 반응적으로 프로그래밍하고 별도로 테스트할 수 있습니다. 이는 뷰 계층과 논리 계층 모두에서 재사용 가능성이 높은 반응 상태 논리 단위를 생성합니다.

여기서 간단한 반대 예시를 만들었지만 Reactable은 훨씬 더 복잡한 상태 관리 시나리오(예: 데이터 가져오기, 양식 등...)를 위해 확장 가능하고 구성 가능합니다. 자세한 내용은 문서를 확인하세요!

위 내용은 반응형 프로그래밍을 사용한 재사용, 확장 및 테스트 가능한 상태 논리.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!