react-bootstrap-table-next row read, add, update and delete (CRUD)

API 서버에서 데이터를 받거나, 로컬 데이터를 가지고 테이블에서 수정할 수 있도록 CRUD를 만들어놨는데, 수정하거나 삭제하는 경우 정상적으로 동작하지 않는다.

 

단, 추가하는 경우 원본 데이터가 정상적으로 유지되지만, Delete와 Update(row 체크 박스 선택) 시에는 원본 데이터가 수정되어 애를 먹었다.

 

<필자가 겪었던 이슈> 데이터: checkObject: [1,2,3,4,5] Case 1) 테이블에 그려진 아이콘을 클릭하여 0번째 요소를 삭제했으나 console.log로 보면 원본 데이터가 변조되어 checkObject: [1]로 나타났다. Case 2) 테이블에 그려진 아이콘을 클릭하여 2번째 요소를 삭제했으나 console.log로 보면 원본 데이터가 변조되어 checkObject: [1,2,3]로 나타났다. Case 3) 테이블에 그려진 아이콘을 클릭하여 4번째 요소를 삭제했으나 console.log로 보면 원본 데이터가 변조되어 checkObject: [1,2,3,4,5]로 나타났다.

여러가지 레퍼런스와 삽질을 동시에 해봤는데, 라이브러리 자체에서 지원을 안하는건가 하고 포기하려는 찰나.. 다음과 같은 방식으로 해결했다.

 

isDUmmyField가 true로 되어 있는 상태에서, formatter를 통해서 column을 랜더링하고, formatExtraData()를 추가 해줬더니 기존 데이터를 가지고 CRUD 할 수 있었다.