코드의 전반적인 품질을 향상시키려면 데이터 모델을 기본 뷰와 깔끔하게 분리된 상태로 유지하는 것이 좋습니다.

Observable을 완벽하게 지원하는 Rimmel.js와 같은 UI 라이브러리 또는 기능적 반응형 프레임워크를 사용하면 잘 알려지지 않은 디자인 외에도 Observable 스트림(예: 간단한 데이터 입력, 데이터 출력 스트림)으로 모델을 정의할 수 있습니다. 이벤트 어댑터인 패턴입니다.

이벤트 어댑터는 모든 소스 이벤트(예: DOM의 MouseEvent, PointerEvent, KeyboardEvent 등)를 데이터 모델에서 실제로 사용되는 형식으로 매핑하는 데 도움이 됩니다. UI.

Rimmel을 사용하면 이러한 스트림을 DOM에 간단하게 연결할 수 있습니다.

import { rml } from 'rimmel';

const component = () => {
  const total = new Subject().pipe(
    map(x => doSomethingWith(x)),
  );

  return rml`
    click me
    
${stream}
  `;
}

바인딩은 간단합니다. Rimmel은 버튼에서 들어오는 클릭 이벤트를 관찰 가능한 스트림에 직접 연결합니다. 이 스트림은 버튼을 클릭할 때마다 PointerEvent 인스턴스를 수신합니다.

지금까지는 너무 좋았습니다. 스트림이 여러 소스에서 데이터를 가져와 각각에 따라 다르게 동작해야 한다면 어떻게 해야 합니까?
각각 하나를 더하거나 빼는 증가 및 감소 버튼이 있는 간단한 카운터를 만들어 보겠습니다.

import { scan } from 'rxjs';
import { rml } from 'rimmel';

const component = () => {
  const total = new BehaviorSubject(0).pipe(
    scan((old, new) => old new, 0),
  );

  return rml`
    inc
    dec

    
${total}
  `;
}

이것은 작동하지만 템플릿 부분에는 안티 패턴인 일부 논리가 포함되어 있습니다. 이상적으로는 전반적인 테스트 가능성을 최대화하기 위해 논리 없는 템플릿을 갖기 위해 노력해야 합니다.

Rimmel 1.2에는 이를 정확하게 지원하는 새로운 기능인 이벤트 매퍼가 있습니다. DOM 이벤트를 모델에 필요한 항목으로 매핑하는 데 도움이 되므로 템플릿과 로직을 완벽하게 분리할 수 있습니다. 작동 방식은 다음과 같습니다.

import { map, scan } from 'rxjs';
import { rml, reversePipe } from 'rimmel';

const Inc = reversePipe(map(() => 1));
const Dec = reversePipe(map(() => -1));
const component = () => {
  const total = new BehaviorSubject(0).pipe(
    scan((old, new) => old new, 0),
  );

  return rml`
    inc
    dec

    
${total}
  `;
};

reversePipe는 RxJS의 Pipe() 함수와 반대로 작동하는 파이프라인 생성 도구인 혁신적인 추가 기능입니다. 후자가 스트림 출력에 변환을 적용하는 반면 reversePipe()는 이를 입력에 적용합니다.
이렇게 하면 메인 스트림 Subject/BehaviorSubject/Observer/EventListener가 항상 원하는 형식으로 데이터를 가져오고 어댑터를 별도의 문제로 유지하게 됩니다.

역방향 파이프라인에서는 모든 RxJS 연산자를 사용할 수 있습니다. 사용자가 다른 키를 누르는 대신 Enter 키를 치는 경우와 같은 특정 이벤트만 필터링하고 싶으신가요? 필터 연산자를 사용하세요:

import { Subject, filter, map } from 'rxjs';
import { rml, inputPipe } from 'rimmel';

const UpperOnEnter = inputPipe(
  filter((e: Event) => e.key == 'Enter'),
  map((e: Event) => e.target.value.toUpperCase()),
);

const Component = () => {
  const state = new Subject();

  return rml`
    Type some text and hit Enter
${state}
  `;
};

단위 테스트와 관련하여 이것은 테스트를 더 간단하고 효율적으로 만들어 주는 작지만 유용한 추가 기능입니다.

이 Stackblitz에서 활동 중인 이벤트 매퍼를 확인해 보세요.