React-Redux 지원

React에 대한 완전한 지원 외에도, Wijmo는 단방향 데이터 흐름과 데이터 불변성을 요구하는 Redux에 대해서도 전용 지원을 제공합니다.

Redux는 애플리케이션에서 데이터를 처리하는 방식에 추가적인 제약을 부과합니다. 이는 컴포넌트가 소비하는 원본 데이터를 직접 변경할 수 없다는 점에 있습니다.

대신 데이터 변경에 대한 정보를 Redux Store로 디스패치해야 하며, 이를 통해 Redux reducer가 실제 데이터 변경을 수행합니다. 그 이후 UI 컨트롤은 변경된 새로운 데이터를 기준으로 업데이트됩니다.

이러한 특정 워크플로는 InputNumber나 DateEdit과 같은 단순한 UI 입력 컴포넌트에서는 문제가 되지 않습니다. 이 경우 컨트롤의 value 속성은 부모 컴포넌트의 속성에 바인딩되고, valueChanged 이벤트는 로컬 데이터를 직접 변경하는 대신 Store로 데이터 변경 액션을 디스패치하는 데 사용됩니다.

문제는 편집 가능한 데이터 그리드와 같은 복잡한 컨트롤에서 발생합니다. 이러한 컨트롤은 기본적으로 하위 데이터에 대해 직접 변경을 수행하도록 설계되어 있습니다. 이 동작은 데이터 불변성을 요구하는 Redux의 요구사항과 충돌하게 됩니다. 그 결과, 일반적인 React 애플리케이션에서는 정상적으로 동작하던 편집 가능한 FlexGrid 컴포넌트가 Redux 애플리케이션에서는 데이터 편집에 사용할 수 없게 되며, 읽기 전용 데이터 그리드로만 사용할 수 있게 됩니다.

Wijmo는 이러한 문제를 해결하기 위한 솔루션을 제공하며, 이를 통해 하위 데이터를 직접 변경하지 않으면서도 FlexGrid의 데이터 편집 기능을 유지할 수 있습니다. 이 솔루션을 사용하면 Redux 애플리케이션에서도 FlexGrid를 데이터 편집 용도로 사용할 수 있습니다.

원하는 기능은 Immutabilityprovider 컴포넌트를 사용하여 구현할 수 있으며, 이 컴포넌트는 FlexGrid 컴포넌트에 연결되어 다음과 같은 방식으로 동작을 변경합니다:

• 사용자 편집에 따라 FlexGrid가 하위 데이터 배열을 직접 변경하는 것을 방지합니다.

• 데이터 변경 이벤트를 트리거하며, 이 이벤트는 Redux Store로 데이터 변경 액션을 디스패치하는 데 사용됩니다.

데이터는 Redux reducer를 거친 후, 변경 사항을 반영하기 위해 다시 그리드로 전달됩니다.

이와 같은 복잡한 데이터 흐름은 사용자 경험에는 영향을 주지 않습니다. 최종 사용자 입장에서는 마치 하위 데이터를 직접 업데이트하는 일반적인 그리드를 편집하는 것처럼 보입니다.

ImmutabilityProvider의 동작을 확인하려면 편집 가능한 Redux 그리드 샘플을 사용해 보시기 바랍니다. ImmutabilityProvider의 API에 대해서는 관련 문서를 참고하시기 바랍니다. 이 포스팅에서는 React-Redux 애플리케이션에서 ImmutabilityProvider를 사용하는 방법에 대해 자세히 설명하고 있습니다.

마찬가지로 ImmutabilityProvider는 TransposedGrid도 지원합니다. 빠르게 시작하려면 편집 가능한 Redux TransposedGrid 데모를 사용할 수 있습니다.

아키텍처 차이점 표: