React-Redux 지원

Wijmo는 React에 대한 완전한 지원 외에도 Redux에 대한 전용 지원도 제공합니다. Redux는 단방향 데이터 흐름과 데이터 불변성 요구사항을 특징으로 합니다.

Redux는 애플리케이션에서 데이터를 처리하는 방식에 추가적인 제약을 가합니다. 이는 컴포넌트가 사용하는 소스 데이터를 직접 수정할 수 없다는 점입니다. 대신, 데이터 변경에 대한 정보를 Redux Store에 디스패치하여 Redux 리듀서가 데이터를 실제로 변경하도록 해야 합니다. 그 후 UI 컨트롤은 새로운 변경된 데이터를 기반으로 업데이트됩니다.

이 특정 워크플로우는 InputNumber 나 DateEdit와 같은 단순한 UI 입력 컴포넌트에는 문제가 되지 않습니다. 이 경우, 컨트롤의 value 속성은 부모 컴포넌트의 속성에 바인딩되며, valueChanged 이벤트를 사용해 데이터 변경 액션을 Store에 디스패치합니다. 데이터가 로컬에서 수정되는 것이 아니라, 데이터 변경 정보가 Store로 전달되는 방식입니다.

문제는 편집 가능한 Data Grid 와 같은 복잡한 컨트롤에서 발생합니다. 이러한 컨트롤은 기본적으로 데이터를 직접 수정하는 방식으로 설계되었습니다. 이 기능은 Redux에서 요구하는 데이터 불변성 원칙과 상충합니다. 결과적으로, 편집 가능한 FlexGrid 컴포넌트는 일반적인 React 애플리케이션에서는 잘 동작하지만, Redux 애플리케이션에서는 데이터 편집이 불가능해지고 읽기 전용 데이터 그리드로만 사용할 수 있게 됩니다.

Wijmo는 이 문제를 해결할 수 있는 솔루션을 제공합니다. 이 솔루션은 FlexGrid의 데이터 편집 기능을 유지하면서, 기본 데이터를 직접 수정하는 것을 방지할 수 있습니다. 이 솔루션을 사용하면, Redux 애플리케이션에서도 데이터 편집을 위한 FlexGrid를 사용할 수 있습니다.

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

• 사용자 편집에 응답하여 FlexGrid가 기본 데이터 배열을 수정하지 않도록 합니다.

• 데이터 변경 이벤트를 트리거하여, Redux Store로 데이터 변경 액션을 디스패치합니다.

데이터는 Redux 리듀서를 통해 처리되고, 변경된 데이터가 그리드로 반환되어 반영됩니다.

하지만 이 복잡한 데이터 흐름은 사용자 경험에 영향을 미치지 않습니다. 최종 사용자에게는 모든 것이 마치 일반적인 그리드를 편집하는 것처럼 보이며, 기본 데이터가 직접 업데이트되는 것처럼 동작합니다.

Editable Redux Grid 샘플을 사용하여 ImmutabilityProvider 가 어떻게 동작하는지 확인할 수 있습니다. 또한 ImmutabilityProvider의 API를 이해하려면 ImmutabilityProvider 문서를 참조하시기 바랍니다,