[AgGrid] Client Side Data, Server Side Data 분리 문제

어제 일하다 한가지 이상한 점을 확인 했는데 Ag Grid에서 발생한 문제였다.

일단 먼저 Ag Grid가 제공하는 파워풀한 기능들이 당연히 이런걸 전제하고 만들어져있을 것이라고 생각하고 있었는데 

세상에 당연한 것은 없다는 것을 한 번 더 깨닫게 해준다.

 

1) 사건의 발단

지금은 막 단위테스트가 진행되는 중이고 곧 통합테스트가 진행될 예정인 타이밍이라,

내 옆자리에 계신 선배님이 정말 열심히 테스트하는데로 버그를 수정하시며 고생을 하고 계신다. 

근데 어제 저녁 "어 오타씨 AG Grid row Data 넣어주면 자체적으로 그 데이터랑 똑같은 데이터를 가지고 있는게 아니라 원본을 그대로 보고 있네요?" 라며 말씀을 하셨는데, 그러면 안되는데..  라는 생각이 스쳐지나갔다. 

자세히 설명하면 Grid 상에서 데이터를 편집했을 때 UI  적으로만 변경되는 것이 아니라, 원본의 데이터가 변경된다는 치명적인 문제가 있었다. 

 

2) 왜 그러면 안 될까?

우리회사는 React를 사용해 프로젝트를 하고 있다. 근데 React는 기본적으로 무엇을 위해 만들어졌는지 생각해봐야한다.

Model 에 담겨있는 데이터를 직접 변경하여 Flow를 유추하기 힘들게 만드는 양방향 데이터 흐름을 막는다는 것이 React를 사용하는 정말 커다란 이유 중에 하나인데 어떠한 액션도 없이 데이터가 변경된다는 것은 지금 양방향 데이터 흐름이 발생하고 있다는 것이다. 

 

조금 이해하기 쉽도록 도식화 해보자. 

---

<이상적인 흐름>

서버 => 클라이언트의 스토어 => view => UI상 이벤트에 따른 사본데이터 변경 => Action/Dispatch를 통한 원본데이터 변경

---

 

이런 식으로 서버에서 받아온 데이터 원본의 경우 가공되지 않도록 그대로 보존하고, 만일 변경할 사항이 생겼다면 서버에도 변경해야한다는 요청을 날리고 서버의 데이터와 클라이언트의 원본 데이터가 일치해야만 한다. 

---

<현재의 흐름>

서버 => 클라이언트의 스토어 => view => UI 상 이벤트 발생 스토어 내 원본데이터 변경?

---

이 문제는 DB에 들어있는 데이터와 사용자가 보고 있는 데이터가 달라질 수 있는 문제를 야기한다. 

store에 들어있는 데이터는 서버의 데이터와 동일해야하고, 사용자가 화면 상 데이터를 아무리 편집해도 변하지 않는 상태를 유지해야한다. 원본데이터의 변경은 오직 Action || Dispatch를 통해서만 실행되어야하는 것이다. 

 

근데 이걸 Ag Grid가 막 하고 있으니 당황스러울 뿐이었다. 

일단 계속 확인해보고 해결을 해보고자 한다.

 

 

---

 

해결 완료 

AG Grid 에서 지원해주는 옵션 같은게 없을까? 라는 생각으로 하루종일 들여다 봤는데 따로 그런 옵션은 존재하지 않았다. 

그냥 원본데이터를 lodash의 cloneDeep() 함수로 deep copy 해서 해당 데이터를 Aggrid에 넘겨주는 방법을 채택했다.